1.Picker组件 [说明：在ios和android渲染原生的选择器.]
属性：
onValueChange某一项被选中时执行此回调,调用时带有的参数：
- itemValue：被选中项的value属性
- itemPosition：被选中项在picker中的索引位置
selectedValue默认选中的值。可以是字符串或整数
style
testID用于在端对端测试中定位此视图。
enabled如果设为false，则会禁用此选择器。【只适用Android】
mode在Android上，可以指定在用户点击选择器时，以怎样的形式呈现选项：【只适用Android】
- dialog: 显示一个模态对话框。默认选项。
- dropdown: 以选择器所在位置为锚点展开一个下拉框。
prompt设置选择器的提示字符串。在Android的对话框模式中用作对话框的标题。【只适用Android】
itemStyle指定应用在每项标签上的样式。【只适用IOS】
栗子：
<Picker
selectedValue={this.state.language}
style={{ height: 50, width: 100 }}
enabled={true}
mode='dropdown'
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
2.Slider组件[说明：用于选择一个范围值的组件。]
style
disabled如果为true，用户就不能移动滑块。默认为false。
maximumValue滑块的最大值（当滑块滑到最右端时表示的值）。默认为1。
minimumTrackTintColor滑块左侧轨道的颜色。在iOS上默认为一个蓝色的渐变色。
minimumValue滑块的最小值（当滑块滑到最左端时表示的值）。默认为0。
onSlidingComplete用户松开滑块的时候调用此回调，无论值是否变化。回调值为当前值。
onValueChange在用户拖动滑块的过程中不断调用此回调。
step滑块的步长（拖动变化的最小单元）。这个值应该在0到(maximumValue - minimumValue)之间。默认值为0。
maximumTrackTintColor滑块右侧轨道的颜色。在iOS上默认为一个灰色的渐变色。
value滑块的初始值。这个值应该在最小值和最大值之间。默认值是0。
thumbTintColorColor of the foreground switch grip. 【只适用android】
maximumTrackImage指定一个滑块右侧轨道背景图。仅支持静态图片。图片最左边的像素会被平铺直至填满右侧轨道。【只适用ios】
minimumTrackImage指定一个滑块左侧轨道背景图。仅支持静态图片。图片最右边的像素会被平铺直至填满左侧轨道。【只适用ios】
thumbImage给滑块设置一张图片。只支持静态图片。【只适用ios】
trackImage给轨道设置一张背景图。只支持静态图片。图片最中央的像素会被平铺直至填满轨道。【只适用ios】
栗子：
import React, {Component} from "react";
import {View, Slider, Text} from "react-native";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
value: 20
}
}
render() {
return (
<View style={{marginTop: 22}}>
<Slider style={{
width: 280,
marginTop: 20
}}
minimumValue={0}
maximumValue={100}
value={this.state.value}
disabled={false}
minimumTrackTintColor="red"
maximumTrackTintColor="blue"
step={10}
onValueChange={(value) => {
this.setState({value: value})
}}/>
<Text style={{marginTop: 20}}>
当前选择的value：{this.state.value}
</Text>
</View>
);
}
}
3.Switch组件[跨平台通用的“开关”组件。]
disabled如果为true则禁用此组件的交互。
trackColor开启状态时的背景颜色。
ios_backgroundColor在iOS中，自定义背景颜色。当切换值为false或禁用切换(且切换为半透明)时，可以看到此背景色。
onValueChange当值改变的时候调用此回调函数，参数为新的值。
thumbColor开关上圆形按钮的背景颜色。在iOS上设置此颜色会丢失按钮的投影。
tintColor关闭状态时的边框颜色(iOS)或背景颜色(Android)。【tintColor已被弃用，使用trackColor代替。】
value表示此开关是否打开。默认为false（关闭状态）。
栗子：
import React, {Component} from "react";
import {View, Switch} from "react-native";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
falseSwitchIsOn: false
}
}
render() {
return (
<View style={{marginTop: 22}}>
<Switch
disabled={false}
thumbColor='red'
// 开关上圆形按钮的背景颜色。在iOS上设置此颜色会丢失按钮的投影。
onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
style={{marginBottom:10,marginTop:10}}
value={this.state.falseSwitchIsOn} />
</View>
);
}
}
4.ActivityIndicator组件[说明：显示一个圆形的 loading 提示符号。]
属性：
animating是否要显示指示器动画，默认为 true 表示显示，false 则隐藏。
color滚轮的前景颜色（默认为灰色）。
size指示器的大小，默认为'small'。目前只能在 Android 上设定具体的数值。
hidesWhenStopped在animating为 false 的时候，是否要隐藏指示器（默认为 true）。如果animating和hidesWhenStopped都为 false，则显示一个静止的指示器。【只适用ios】
栗子：
<ActivityIndicator
animating={false}
hidesWhenStopped={false}
// 只使用ios平台
size="large"
color="#0000ff"/>
5.Alert组件[说明：启动一个提示对话框，包含对应的标题和信息。]
注：在 iOS 上你可以指定任意数量的按钮。每个按钮还都可以指定自己的样式，此外还可以指定提示的类别。
在 Android 上最多能指定三个按钮，这三个按钮分别具有“中间态”、“消极态”和“积极态”的概念：
如果你只指定一个按钮，则它具有“积极态”的属性（比如“确定”）；两个按钮，则分别是“消极态”和“积极态”（比如“取消”和“确定”）；三个按钮则意味着“中间态”、“消极态”和“积极态”（比如“稍候再说”，“取消”，“确定”）。在 Android 上默认情况下点击提示框的外面会自动取消提示框。你可以提供一个额外参数来处理这一事件：{ onDismiss: () => {} }。还有另外一个参数也可以用来阻止提示框被自动取消，即{ cancelable: false }。
alert() 方法：
static alert(title, message?, buttons?, options?, type?)
栗子：
import React, {Component} from "react";
import {View, Text, StyleSheet,TouchableOpacity,Alert} from "react-native";
export default class App extends Component {
render() {
return (
<View style={[styles.container, styles.horizontal]}>
<TouchableOpacity onPress={()=>{
Alert.alert(
'Alert Title',
'My Alert Msg',
[
{text: '稍等', onPress: () => console.log('Ask me later pressed')},
{text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: '確定', onPress: () => console.log('OK')},
],
{ cancelable: false }
//用来阻止提示框被自动取消
)
}}>
<Text>点击</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center'
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 10
}
})
6.Platform模块
React Native 提供了两种方法来区分平台：
- 使用
Platform模块. - 使用特定平台扩展名.
栗子：
第一种方法：
import { Platform, StyleSheet } from "react-native";
const styles = StyleSheet.create({
height: Platform.OS === "ios" ? 200 : 100
});
//或者：
import { Platform, StyleSheet } from "react-native";
const styles = StyleSheet.create({
container: {
flex: 1,
...Platform.select({
ios: {
backgroundColor: "red"
},
android: {
backgroundColor: "blue"
}
})
}
});
这一方法可以接受任何合法类型的参数，因此你也可以直接用它针对不同平台返回不同的组件，像下面这样：
const Component = Platform.select({
ios: () => require("ComponentIOS"),
android: () => require("ComponentAndroid")
})();
<Component />;
第二种方法：特定平台扩展名
当不同平台的代码逻辑较为复杂时，最好是放到不同的文件里，这时候我们可以使用特定平台扩展名。React Native 会检测某个文件是否
具有.ios.或是.android.的扩展名，然后根据当前运行的平台自动加载正确对应的文件。比如：BigButton.ios.js BigButton.android.js
React Native 会根据运行平台的不同自动引入正确对应的组件。
检查平台版本：Platform.Version
在android上，version 属性是一个数字；
在 iOS 上，Version属性是-[UIDevice systemVersion]的返回值，具体形式为一个表示当前系统版本的字符串。
7.KeyboardAvoidingView组件[解决手机上弹出的键盘常常会挡住当前的视图问题]
属性：
keyboardVerticalOffset有时候应用离屏幕顶部还有一些距离（比如状态栏等等），利用此属性来补偿修正这段距离。
behavior
contentContainerStyle如果设定 behavior 值为'position'，则会生成一个 View 作为内容容器。此属性用于指定此内容容器的样式。
enabled是否启用KeyboardAvoidingView。默认为true。
<KeyboardAvoidingView style={styles.container}>
<TextInput
underlineColorAndroid={'#ffffff'}
placeholder="这里是一个简单的输入框"
style={styles.textInput} />
</KeyboardAvoidingView>
