React Native 的组件定义及使用

方式一： ES6

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

方式二： ES5

  var HelloComponent = React.createClass({
        render(){
             rerurn <Text style={{fontSize:20,backgroundColor:'red'}}>Hello</Text>
        }
}}

module.exports = HelloComponent;

 

方式三：函数式

/*无状态的，不能使用this*/

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

 

组件的使用：

import HelloComponent from './HelloComponent';

export default classss setup extends Component {
    
       render() {
               return (
                      <view style={styles.container}>    
                          <HelloComponent
　　　　　　　　　　　　　　　　name='xiaoming'
　　　　　　　　　　　　　　　/>
                       </view>
                   )
                 }