1.Text 标签
用于存放文字,在ReactNative中文字必须包裹在这个标签中。
2.View标签
类似Div标签
3.Button标签
按钮(安卓和ios样式不一样,可以自己编写一个按钮组件),没有onClick,只有onPress
4.TextInput
输入框
安卓机器会有一个下划线
设置underlinecolorAndroid=’#fff’属性来改变颜色隐藏下划线
5.TouchableHighLight标签
被包裹的元素可以触发onPress,并且会有高亮显示
6.TouchableOpacity标签
被包裹的元素可以触发onPress,并且会有闪烁效果
7.TouchableWithoutFeedback标签
被包裹的元素可以触发onPress,没有任何效果
8.ScollView标签
代替View标签可以实现上下滚动效果(数据少时滚动)
9.FlatList标签
额外参数:
data:需要循环的内容
renderItem:循环的每一项的样式
keyExtractor:key值
<FlatList
data={this.state.xxx}
renderItem={({item.index})=>{
return (
xxx(每一项的样式)
)
}}
keyExtractor={(item,index)=>index}
>
</FlatList>
10.navigationOptions组件
顶部导航配置
11.Image标签
地址 source
source={require(’./xxx/xxx’)} (本地地址)
source={{uri:‘xxx’}} (非本地地址)
想要使图片width100%,需要先获取屏幕宽度
先引入Dimensions
const {width} = Diensions.get('window')
12.StatusBar标签
顶部状态栏
可以空出20px的间距,或者使用barStyle属性
barStyle='light-content’变成白色