RN 创建、使用Component

创建 MyComponent.js :

1. ES6 方式创建：

export default 的作用是导出该类，以供外面使用。

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';

export default class MyComponent extends Component {
    render() {
        return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello {this.props.name}</Text>
    }
}

2. ES5 方式创建：（测试不通过。。。但是学习视频通过，估计已经不可用。）

module.exports 的作用是导出该类，以供外面使用。

var MyComponent=React.createClass({
    render(){
        return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello </Text>
    }
})
module.exports = MyComponent;

3. 函数式（无状态，不能使用this）

module.exports 的作用是导出该类，以供外面使用。

function MyComponent(props) {
    return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello {props.name}</Text>
}
module.exports = MyComponent;

无参数的写法：

function MyComponent() {
    return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello</Text>
}
module.exports = MyComponent;

App.js 代码：

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
} from 'react-native';

import MyComponent from './MyComponent.js';

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <MyComponent name="yococo"/>//使用指定的Componet
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
            flex: 1,
            backgroundColor: '#f5fcff',
            marginTop: 80,
    }
});