React-Native 学习笔记1

最新推荐文章于 2022-06-23 19:23:52 发布

原创最新推荐文章于 2022-06-23 19:23:52 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

React Native 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在React Native中定义和使用组件的方法，包括ES6、ES5及函数式组件三种方式，并探讨了组件导出及生命周期的相关知识。

1.如果要在页面使用其他位置定义的组件，需要将要使用的组件加上export default.
2.组件的三种定义方法：

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

/**
 * 方式一：ES6
 * 推荐使用
 */
export default class HelloComponent extends Component {
    render() {
        return (<Text style={{width: 100, height: 40, backgroundColor: 'red'}}> hello.{this.props.name} </Text>
        );
    }
}
/**
 * 方式二：ES5
 */
var HelloComponent = React.createClass()({
    render() {
        return (<Text style={{width: 100, height: 40, backgroundColor: 'red'}}> hello </Text>
        );
    }
})
module.export = HelloComponent;
/**
 * 方式三：方法
 *无状态，不能使用this
 */
function HelloComponent(props) {
    return <Text style={{width: 100, height: 40, backgroundColor: 'red'}}> hello.{props.name} </Text>;
}

module.export = HelloComponent;