react-native 常用组件(一）

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】
栗子：

 this.setState({language: itemValue})}>
                    
                    
                

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 (
            
                 {
                            this.setState({value: value})
                        }}/>
                
                    当前选择的value：{this.state.value}
                
            
        );
    }
}

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 (
            
                 this.setState({falseSwitchIsOn: value})}
                    style={{marginBottom:10,marginTop:10}}
                    value={this.state.falseSwitchIsOn} />

            
        );
    }
}

4.ActivityIndicator组件[说明：显示一个圆形的 loading 提示符号。]
属性：
animating是否要显示指示器动画，默认为 true 表示显示，false 则隐藏。
color滚轮的前景颜色（默认为灰色）。
size指示器的大小，默认为'small'。目前只能在 Android 上设定具体的数值。
hidesWhenStopped在animating为 false 的时候，是否要隐藏指示器（默认为 true）。如果animating和hidesWhenStopped都为 false，则显示一个静止的指示器。【只适用ios】
栗子：

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 (
            
                {
                    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 }
                        //用来阻止提示框被自动取消
                    )
                }}>
                    点击
                
            
        );
    }
}
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")
})();

;

第二种方法：特定平台扩展名
当不同平台的代码逻辑较为复杂时，最好是放到不同的文件里，这时候我们可以使用特定平台扩展名。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。