- 第一步：导入组件
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；
- 箭头函数：=> 左边：函数参数，右边：函数返回值。
