React Native简单使用的五个步骤

• 第一步：导入组件

import React,{Component} from "react"

• React:默认组件，不需要添加{}

• Component：非默认组件需要添加{}

• 第二步：导入常用组件

import {
    AppRegistry,
    StyleSheet,
    View,
    Text
} from 'react-native'

• 第三步：自定义程序入口控件

class React02 extends Component{
    render(){
        return (
            <View style={styles.mainStyle}>
                <View style={[styles.chileStyle,{flex: 0.1}]}>
                    <Text>11111</Text>
                </View>
                <View style={[styles.chileStyle,{flex:0.2}]}>
                    <Text>22222</Text>
                </View>
                <View style={[styles.chileStyle,{alignSelf:'flex-start'},{flex:0.3}]}>
                    <Text>33333</Text>
                </View>
                <View style={[styles.chileStyle,{flex:0.4}]}>
                    <Text>44444</Text>
                </View>
            </View>
        )
    }
}

• 当一个组件要显示的时候，就会自动调用render，渲染组件

• 什么时候使用（）：包装组件标签的时候，必须使用（）

• 第四步：定义样式表，定制组件外观、尺寸、颜色等

var styles = StyleSheet.create({
    mainStyle:{
        backgroundColor:'yellow',
        marginTop:20,
        flex:1,
        flexDirection:'row',
        flexWrap:'wrap',
        justifyContent:'center',
        alignItems:'center'
    },
    chileStyle:{
        backgroundColor:'darkgray',
        width:40,
        height:40,
        marginLeft:5,
        marginBottom:5,
        justifyContent:'center',
        alignItems:'center'
    }
})

• 第五步：注册程序入口组件：注册哪个组件，程序启动时，就会自动去加载注册组件：

AppRegistry.registerComponent('RNDemo',()=>React02)

• 第一个参数：模块名称，随意填，但是必须要与iOS模块中的名称一一对应；
• 第二个参数：函数，箭头函数 ES6；
• 箭头函数：=> 左边：函数参数，右边：函数返回值。