React Native 的组件定义及使用

最新推荐文章于 2024-10-02 05:39:15 发布

weixin_30794851

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量54

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lonelyGentleman/p/6872407.html

版权

方式一： 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>
                   )
                 }

转载于:https://www.cnblogs.com/lonelyGentleman/p/6872407.html