方式一 ES6建立元件的方式

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

方式二 ES5建立元件的方式

var HelloComponent=React.createClass({ 
render() { 
    return ( <Text style={{fontSize:20,backgroundColor
 
:'red'}}>Hello ES5建立元件的方式</Text> ); 
    }
}) 
module.exports=HelloComponent; //匯出

方式三 函式式

• 無狀態，無法使用this，因為其沒有指標，沒有生命週期方法
• pros 為函式的引數

• 通過使用{pros.name}來獲得從index.js中傳過來的值，

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

  在index.js中

  import HelloComponent from './HelloComponent' //加入此行 
  
  export default class simple extends Component {
  render() { 
   return (
   <View style={styles.container}> 
       <HelloComponent name = "小明"/> //使用HelloComponent元件 
   </View> );
  } }

  第一種和第二種方式也可以通過{this.pros.name}來獲得index.js中傳過來的值