Text&View
<View>
<Text>Hello World!</Text>
<Text>你好</Text>
</View>
Button
<Button
onPress={(e) => this.onPressLearnMore(e)}
title="查看更多"
color="#841584"
/>
警告框 （ Alert ）
Alert.alert('这是标题','这是描述文字')
Alert.alert(
'这是标题',
'这是描述',
[
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'OK', onPress: () => console.log('OK Pressed')},
]
)
// 自定义
Alert.alert(
'这是标题',
'这是描述',
[
{text: '这是自定义按钮', onPress: () => console.log('Ask me later pressed')},
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'OK', onPress: () => console.log('OK Pressed')},
]
)
图片
<Image source={{ uri: item.defaultImage }} ></Image>
<Image source={ require('../images/f.png'),}/>
TouchableOpacity 点击半透明
<TouchableOpacity
onPress={this.itemClick.bind(this,item)}>
</TouchableOpacity>
flatList列表 columnWrapperStyle 行样式 refreshing 是否刷新中 true | false onRefresh 下拉刷新动作 onEndReached 触底动作 data 指向数据 numColumns 列显示个数 renderItem 渲染数据项目
<FlatList
keyExtractor={(item)=>item.ID}
columnWrapperStyle={styles.row}
refreshing={this.state.refreshing}
onRefresh={()=>{this.getMovie()}}
onEndReached={()=>{this.getMovie(2)}}
data={this.state.movies}
numColumns ={3}
renderItem={({item}) => {return(
<View
key={item.ID}
style={styles.col,styles.subCenter} >
<TouchableOpacity
onPress={this.itemClick.bind(this,item)}>
<Image source={{ uri: item.defaultImage }} style={{width:125, height: 160}} ></Image>
<Text>{item.MovieName}</Text>
</TouchableOpacity>
</View>)}}
/>
样式
color 颜色
React Native 支持了 CSS 中大部分的颜色类型
Number 数值
在 React-Native 中，并不支持百分比单位，目前只支持一种单位，即 pt 绝对长度单位，同时，你在定义时不需要加单位
RN 默认 flex布局 flexDirection 默认值为 column 垂直布局
import { StyleSheet} from 'react-native';
const styles = StyleSheet.create({
row:{
display:'flex',
flexDirection:'row',
justifyContent:'space-around'
},
col:{
flex:1,
},
})
使用方式
<Image source={{ uri: item.defaultImage }} style={{width:125, height: 160}} ></Image>
// 行内样式
<View style={styles.row}>
// 指定样式
<View style={[styles.row,styles.overlay]}>
// 指定多个样式
react-native-swiper 幻灯片
showButtons 是否显示左右按钮
autoplay 自动播放
activeDotColor 激活颜色
<Swiper
showsButtons = {false}
autoplay={false}
style={{height:160}}
activeDotColor="#f0f"
>
<View style={styles.slide}>
<Text >Android</Text>
</View>
<View style={[styles.slide,styles.blue]}>
<Text>iOS</Text>
</View>
<View style={styles.slide}>
<Text>Java</Text>
</View>
</Swiper>
input
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
onChangeText={text => onChangeText(text)}
value={value}
maxLength={40}
onBlur={}
/>
扩展
StatusBar
barStyle 状态栏文字的颜色 default | light-content
<StatusBar barStyle={'light-content'} />
backgroundColor Android 设备上状态栏的背景颜色
<StatusBar backgroundColor={'blue'} />
translucent 设置状态栏是否为透明 true | false 。 当状态栏的值为 true 的时候，应用将会在状态栏下面进行绘制显示。这样在 Android 平台上面就是沉浸式的效果，可以达到 Android 和 iOS 应用显示效果的一致性。 该值常常同配置半透明效果的状态栏颜色一起使用。
<StatusBar translucent={true} />
React$Node
这种语法
const App: () => React$Node = () => {
}
就相当于
class App extends React.Component {
render() {
}
}
新的写法省略了写rander方法，但VScode会报错，可以改成老的写法也没问题
SafeAreaView
加入了针对iPhoneX设备齐刘海页面适配的组件SafeAreaView，为ReactNative开发APP时对iPhone X的页面适配提供了很大的方便
Dimensions
Dimensions API 介绍 我们使用 Dimensions API 可以得到手机屏幕的宽和高。
onLayout 回调函数还可以用来监测设备放置状态的改变，并得到改变后的新的屏幕高度和宽度。
import React, {Component} from 'react';
import {
StyleSheet,
View,
Dimensions
} from 'react-native';
export default class App extends Component {
_onLayout(event) {
{
let { x, y, width, height } = event.nativeEvent.layout;
console.log('通过onLayout得到的宽度：' + width);
console.log('通过onLayout得到的高度：' + height);
}
let { width, height } = Dimensions.get('window');
console.log('通过Dimensions得到的宽度：' + width);
console.log('通过Dimensions得到的高度：' + height);
}
render() {
return (
<View style={styles.container} onLayout = {this._onLayout}>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
})
输出结果
03-22 11:25:25.444 1339 3924 I ReactNativeJS: 通过onLayout得到的宽度：411.4285583496094
03-22 11:25:25.444 1339 3924 I ReactNativeJS: 通过onLayout得到的高度：659.4285888671875
03-22 11:25:25.444 1339 3924 I ReactNativeJS: 通过Dimensions得到的宽度：411.42857142857144
03-22 11:25:25.444 1339 3924 I ReactNativeJS: 通过Dimensions得到的高度：683.4285714285714
