react-native 常用组件

组件

1.ActivityIndicator

显示一个圆形的loading提示符号。
属性：
(1)animating(bool): 是否要显示指示器，默认为true，表示显示;
(2)color(string): 滚轮的前景颜色;
(3)(ios)hidesWhenStopped(bool): 在没有动画的时候，是否要隐藏指示器(默认为true);
(4)size(enum('small', 'large')): 指示器的大小。small的高度为20，large为36。

import React, { Component } from 'react';
import { ActivityIndicator, StyleSheet, View, TouchableOpacity, Text } from 'react-native';

export default class MyActivityIndicator extends Component {

  constructor(){
    super();
    this.state = {
      animating: true
    };
  }
  
  componentDidMount() {
    var timer = setInterval(()=>{
      var animating = this.state.animating;
      animating = animating ? false : true;
      this.setState({
        animating: animating
      })
    },1000)  
  }

  componentWillUnmount() {
    // 如果存在this.timer，则使用clearTimeout清空。
    // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
    this.timer && clearTimeout(this.timer);
  }

  render() {
    return (
      <View style={styles.container}>   
        <ActivityIndicator
          animating={this.state.animating}
          style={[styles.centering, {height: 80}]}
          size="small" color='gray' />
        <ActivityIndicator
          animating={this.state.animating}
          style={[styles.centering, {height: 80}]}
          size="large" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  centering: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 8,
  },
  btn:{
    marginTop:10,
    width:150,
    height:35,
    backgroundColor:'#3BC1FF',
    justifyContent:'center',
    alignItems:'center',
    borderRadius:4,
  },
});

2.DrawerLayoutAndroid

仅限安卓平台

import React, { Component } from 'react';
import { Text, View, DrawerLayoutAndroid, TextInput, TouchableHighlight } from 'react-native';

export default class MyDrawerLayoutAndroid extends Component {
  openDrawer(){        
      this.refs.drawerLayout.openDrawer()
  }
  closeDrawer(){
      this.refs.drawerLayout.closeDrawer()
  }
  drawerStateChanged(state){
    console.log(state);
    // Idle（空闲），表示现在导航条上没有任何正在进行的交互。
    // Dragging（拖拽中），表示用户正在与导航条进行交互。
    // Settling（停靠中），表示用户刚刚结束与导航条的交互，导航条正在结束打开或者关闭的动画。
  }
  render() {
    var navigationView = (
      <View style={{flex:1,backgroundColor:'#fff'}}>            
        <Text style={{paddingTop: 30, margin:20,fontSize:24,color:'#188eee'}}>
          我是侧边栏/抽屉
        </Text>
        <TextInput style={{width:300,height:40,backgroundColor:'#fff'}}/>
        <TouchableHighlight
          onPress={()=>this.closeDrawer()}
          style={{padding:10,backgroundColor:'#e6e6e6',marginTop:20}}
        >
          <Text style={{textAlign:'center',}}>
            closeDrawer:关闭抽屉
          </Text>
        </TouchableHighlight>
     </View>
    );

    return (
        <DrawerLayoutAndroid drawerBackgroundColor="rgba(188,0,202,0.2)"
          ref={'drawerLayout'}
          drawerWidth={300} 
          drawerPosition={DrawerLayoutAndroid.positions.Right}
          renderNavigationView={() => navigationView}
          onDrawerOpen={()=>{console.log('打开了')}} 
          onDrawerClose={()=>{console.log('关闭了')}}
          onDrawerSlide={()=>console.log("正在交互......")}
          onDrawerStateChanged={(state)=>this.drawerStateChanged(state)} 
          drawerLockMode='unlocked'         
          keyboardDismissMode="on-drag" 
          statusBarBackgroundColor='#ccc'>
          <View style={{height: 150, alignItems: 'center'}}>
              <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
              <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
              <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>往左边滑动</Text>
          </View>
          <TouchableHighlight
            onPress={()=>this.openDrawer()}
            style={{padding:10,backgroundColor:'#e6e6e6'}}>
            <Text style={{textAlign:'center',}}>
              openDrawer:打开抽屉
            </Text>
          </TouchableHighlight>
          <TextInput style={{width:410,height:40,backgroundColor:'#fff'}}/>
        </DrawerLayoutAndroid>
    )
  }
}

3.Image

在Android上支持GIF和WebP格式图片:
默认情况下Android是不支持GIF和WebP格式的,需要在android/app/build.gradle文件中根据需要手动添加以下模块：

dependencies {
  // 如果你需要支持Android4.0(API level 14)之前的版本
  compile 'com.facebook.fresco:animated-base-support:0.11.0'

  // 如果你需要支持GIF动图
  compile 'com.facebook.fresco:animated-gif:0.11.0'

  // 如果你需要支持WebP格式，包括WebP动图
  compile 'com.facebook.fresco:animated-webp:0.11.0'
  compile 'com.facebook.fresco:webpsupport:0.11.0'

  // 如果只需要支持WebP格式而不需要动图
  compile 'com.facebook.fresco:webpsupport:0.11.0'
}

属性：
(1)onLayout(function):当元素挂载或者布局改变的时候调用，参数为：{nativeEvent: {layout: {x, y, width, height}}};
(2)onLoad(function):加载成功完成时调用此回调函数;
(3)onLoadEnd(function):加载结束后，不论成功还是失败，调用此回调函数;
(4)onLoadStart(function):加载开始时调用;
(5)resizeMode(enum('cover', 'contain', 'stretch', 'repeat', 'center')):决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。

[1]cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。
[2]contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白。
[3]stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。
[4]repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。
[5]center: 居中不拉伸。

(6)source {uri: string}:uri是一个表示图片的资源标识的字符串，它可以是一个http地址或是一个本地文件路径（使用require(相对路径)来引用）。
(7)style

4.KeyboardAvoidingView

本组件用于解决一个常见的尴尬问题：手机上弹出的键盘常常会挡住当前的视图。本组件可以自动根据键盘的位置，调整自身的position或底部的padding，以避免被遮挡。

import React, { Component } from 'react';
import {  StyleSheet, Text, TextInput, KeyboardAvoidingView, View } from 'react-native';

export default class MyKeyboardAvoidingView extends Component {
  //behavior位移焦点时就使用哪个属性来自适应，该参数的可选值为：height, position, padding
  render() {
    return (
      <View style={styles.container}>
         <KeyboardAvoidingView behavior="padding" style={styles.container}>
            <TextInput
              underlineColorAndroid={'#fff'}
              placeholder="这里是一个简单的输入框"
              style={styles.textInput} />
         </KeyboardAvoidingView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
   container: {
    flex: 1,
    backgroundColor:'white',
    justifyContent: 'center',
    paddingHorizontal: 20,
    paddingVertical: 5,
  },
  textInput: {
    borderRadius: 5,
    borderWidth: 1,
    width: 300,
    height: 100,
    paddingHorizontal: 10,
  },
});

5.ScrollView

记住ScrollView必须有一个确定的高度才能正常工作(要么直接给它设置高度（不建议），要么flex:1)。
属性：
(1)contentContainerStyle(StyleSheetPropType(ViewStylePropTypes)):这些样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内。例子：

return (
    <ScrollView contentContainerStyle={styles.contentContainer}>
    </ScrollView>
  );
  ...
  var styles = StyleSheet.create({
    contentContainer: {
      paddingVertical: 20
    }
  });

(2)horizontal(bool):当此属性为true的时候，所有的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。
(3)keyboardDismissMode(enum('none', "interactive", 'on-drag')):用户拖拽滚动视图的时候，是否要隐藏软键盘。

none（默认值），拖拽时不隐藏软键盘。
on-drag 当拖拽开始的时候隐藏软键盘。
interactive 软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘。安卓设备上不支持这个选项，会表现的和none一样。

(4)keyboardShouldPersistTaps(enum('always', 'never', 'handled', false, true)):
如果当前界面有软键盘，那么点击scrollview后是否收起键盘，取决于本属性的设置。（译注：很多人反应TextInput无法自动失去焦点/需要点击多次切换到其他组件等等问题，其关键都是需要将TextInput放到ScrollView中再设置本属性）:

'never'（默认值），点击TextInput以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。
'always'，键盘不会自动收起，ScrollView也不会捕捉点击事件，但子组件可以捕获。
'handled'，当点击事件被子组件捕获时，键盘不会自动收起。这样切换TextInput时键盘可以保持状态。多数带有TextInput的情况下你应该选择此项。
false，已过期，请使用'never'代替。
true，已过期，请使用'always'代替。

(5)showsHorizontalScrollIndicator(bool): 当此属性为true的时候，显示一个水平方向的滚动条。
(6)showsVerticalScrollIndicator(bool):当此属性为true的时候，显示一个垂直方向的滚动条。
(7)style
(8)pagingEnabled(bool): 当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。
(9)scrollEnabled(bool):当值为false的时候，内容不能滚动，默认值为true。
(10)onContentSizeChange(function):此函数会在ScrollView内部可滚动内容的视图发生变化时调用。
调用参数为内容视图的宽和高: (contentWidth, contentHeight)
此方法是通过绑定在内容容器上的onLayout来实现的。
(11)onScroll(function):在滚动的过程中，每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。
(12)removeClippedSubviews(bool):（实验特性）：当此属性为true时，屏幕之外的子视图（子视图的overflow样式需要设为hidden）会被移除。这个可以提升大列表的滚动性能。默认值为true。
(13)refreshControl(element): 指定RefreshControl组件，用于为ScrollView提供下拉刷新功能。
方法：
(1)scrollTo(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean)
滚动到指定的x, y偏移处。第三个参数为是否启用平滑滚动动画。
使用示例:
scrollTo({x: 0, y: 0, animated: true})
(2)scrollToEnd(options?):滚动到视图底部（水平方向的视图则滚动到最右边）。
加上动画参数 scrollToEnd({animated: true})则启用平滑滚动动画，或是调用 scrollToEnd({animated: false})来立即跳转。如果不使用参数，则animated选项默认启用。

import React, { Component } from 'react';
import { StyleSheet, ScrollView, View } from 'react-native';

export default class MyScrollView extends Component {

  renderItem() {
      // 数组
      var itemArray = [];
      // 颜色数组
      var colorArray = ['gray', 'green', 'blue', 'yellow', 'black', 'orange'];
      // 遍历
      for (var i = 0; i<colorArray.length; i++) {
          itemArray.push(
              <View key={i} style={[styles.itemStyle, {backgroundColor: colorArray[i]}]}></View>
          );
      }
      return itemArray;
  }

  render(){
      return(
          <ScrollView horizontal={true}>
              {this.renderItem()}
          </ScrollView>
      );
  }

}

var styles = StyleSheet.create({
    itemStyle: {
        // 尺寸
        width: 480,
        height: 200,
    },
});

6.RefreshControl

这一组件可以用在ScrollView或ListView内部，为其添加下拉刷新的功能。当ScrollView处于竖直方向的起点位置（scrollY: 0），此时下拉会触发一个onRefresh事件。
属性：
(1)onRefresh(function):在视图开始刷新时调用。
(2)refreshing(bool):视图是否应该在刷新时显示指示器。

7.ListView

最简单的例子：

constructor(props) {
  super(props);
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  this.state = {
    dataSource: ds.cloneWithRows(['row 1', 'row 2']),
  };
}
render() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Text>{rowData}</Text>}
    />
  );
}

属性：
(1)dataSource:ListView.DataSource实例（列表依赖的数据源）
(2)initialListSize(number): 指定在组件刚挂载的时候渲染多少行数据。用这个属性来确保首屏显示合适数量的数据，而不是花费太多帧逐步显示出来。
(3)onEndReached(function):当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用。原生的滚动事件会被作为参数传递。译注：当第一次渲染时，如果数据不足一屏（比如初始值是空的），这个事件也会被触发，请自行做标记过滤。
(4)onEndReachedThreshold(number):调用onEndReached之前的临界值，单位是像素。
(5)pageSize(number):每次事件循环（每帧）渲染的行数。
(6)removeClippedSubviews(bool):用于提升大列表的滚动性能。需要给行容器添加样式overflow:'hidden'。（Android已默认添加此样式）。此属性默认开启。
(7)renderRow(function):
(rowData, sectionID, rowID, highlightRow) => renderable
从数据源(Data source)中接受一条数据，以及它和它所在section的ID。返回一个可渲染的组件来为这行数据进行渲染。默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。
如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。当一行被高亮时，其两侧的分割线会被隐藏。行的高亮状态可以通过调用highlightRow(null)来重置。
方法：
(1)getMetrics():导出一些用于性能分析的数据。
(2)scrollTo(...args):滚动到指定的x, y偏移处，可以指定是否加上过渡动画。
(3)scrollToEnd(options?):
滚动到视图底部（水平方向的视图则滚动到最右边）。
加上动画参数 scrollToEnd({animated: true})则启用平滑滚动动画，或是调用 scrollToEnd({animated: false})来立即跳转。如果不使用参数，则animated选项默认启用。
实例核心代码：
//更新我的订单记录数据

    getClientListData() {
        //接口
        var PageCount=result.PageCount;
        var orderList=result.OrderList ? result.OrderList : [];

        this.setState({
            loadMore:PageCount > 1 ? true : false,
            resCount:orderList.length,
            PageCount:PageCount,
        })
        if(orderList.length<=0){
            this.setState({
                resCount:0
            })
        }
      
        this.timer = setTimeout(() =>{
            this.setState({
                loaded:true,
                recordData:this.state.recordData.cloneWithRows(this._linkCallList(orderList)),
            });
        }, 400);
        this.timer2 = setTimeout(() =>{
            this.setState({isRefreshing: false,});
        }, 600);
    }, (err) => {
       
    })
}

//连接数据
_linkCallList(data){
    if(!this.state.resList){
        var newData = data;
    }
    else{
        var oldData= this.state.resList;
        var newData = oldData.concat(data);
    }
    if(this.state.PageIndex < this.state.PageCount){
        this.setState({
            resList:newData,
            MoreData:this.state.MoreData.cloneWithRows(newData.concat([{load:true}])),
        })
    }
    else if(this.state.resCount>0){
        this.setState({
            resList:newData,
            MoreData:this.state.MoreData.cloneWithRows(newData.concat([{loadEnd:true}])),
        })
    }
    return newData;
}

//下拉刷新
_onRefresh() {
    this.setState({
        resList:null,
        isRefreshing:true,
        PageIndex:1,
    },()=>{
        //刷新数据
        this.getClientListData();
    })
}

//下拉加载
_endReach(){
    if(this.state.PageIndex < this.state.PageCount){
        this.setState({
            PageIndex:this.state.PageIndex+1,//页标
            loadMore:true,
        },()=>{
            this.getClientListData();
        })
    }
}

//处理错误
handleError(err){
    this.setState({isRefreshing: false,loaded: true});
    if(this.state.PageIndex > 1){
        this.setState({
            MoreData:this.state.MoreData.cloneWithRows(this.state.resList.concat([{netErr:true}])),
        })
    }
    if(err == FetchResult.TIMEOUT){
        ToastShow('网络请求超时，请稍后再试');
    }else if(err == FetchResult.NETWORKERR){
        ToastShow('没有网络连接，请稍后再试');
    }else{
        ToastShow('网络异常，请稍后再试');
    }
}

//重新加载
retryData(){
    this.setState({
        MoreData:this.state.MoreData.cloneWithRows(this.state.resList.concat([{load:true}])),
    },()=>{
      this.getClientListData();
    })
}

 getScrollViewRef(component) {
    this.scrollViewRef = component;
}

//渲染列表
_renderList(){
    if(this.state.resCount==0&&this.state.PageIndex==1){
        return (
            <ScrollView
                refreshControl={
                        <RefreshControl
                            refreshing={this.state.isRefreshing}
                            onRefresh={this._onRefresh.bind(this)}
                            colors={['#3ac569']}
                            tintColor={'#3ac569'}
                            progressBackgroundColor='#fff' />
                      }>
                <View style={styles.TextView}>
                    <View style={styles.recordBox}>
                        <Image style={styles.searchIcon} source={IconData.searchIcon} />
                        <Text style={styles.noText}>没有相关记录</Text>
                    </View>
                </View>
            </ScrollView>
        );
    }
    else{
        return (
            <ListView
              refreshControl={
                <RefreshControl
                  refreshing={this.state.refreshing}
                  onRefresh={this.onRefresh.bind(this)}
                  colors={['#3ac569']}
                  tintColor={'#3ac569'}
                  progressBackgroundColor='#fff'/>
              }
              style={[styles.listView,this.state.style]}
              dataSource={this.state.loadMore ? this.state.MoreData : this.state.recordData}
              renderRow={this._renderRow.bind(this)}
              initialListSize={200}
              pageSize = {10}
              onEndReachedThreshold = { 40 }
              onEndReached ={this.endReached.bind(this)}
              ref={(component) => this.getScrollViewRef(component)} />
        );
    }
}

_renderRow(rowData){
  if(rowData.load){
    return (
      <View style={{flex:1,height:25,flexDirection:'row',justifyContent:'center',alignItems:'center',marginBottom:10,}}>
        <ActivityIndicator
          style={[styles.centering, {height: 40}]}
          size="small" color='#3ac569'
        />
        <Text style={{marginLeft:5}}>正在加载中...</Text>
      </View>
      );
  }
  else if(rowData.netErr){
        return (
            <TouchableOpacity
                onPress={()=>{ this.props.retryData(); }
            }>
                <View style={{flex:1,height:25,flexDirection:'row',justifyContent:'center',alignItems:'center',marginBottom:10,}}>
                    <Text>
                        网络数据错误，点击再试
                    </Text>
                </View>
            </TouchableOpacity>
        );
  }
  else if(rowData.loadEnd){
    return (
      <View style={{flex:1,height:25,flexDirection:'row',justifyContent:'center',alignItems:'center',marginBottom:10,}}>
        <Text>没有更多数据了</Text>
      </View>
      );
  }
    return (
         <Text>rowData.id</Text>
    );
}
render() {
    if(!this.state.loaded){
        return(
            <View style={{flex:1,backgroundColor:WinStyle.PageBGColor}}>
                <View style={{height:300,flexDirection:'column',justifyContent:'center',alignItems:'center'}}>
                    <Loading />
                </View>
                {this._renderBottomBar()}
            </View>);
    }
    else{
        return (
            <View style={{flex:1,backgroundColor:WinStyle.PageBGColor}}>
                <View style={{flex:1,marginBottom:50}}>
                    {this._renderList()}
                </View>
                {this._renderBottomBar()}
            </View>
        );
    }

8.Modal

Modal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。
在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。
属性:
(1)animationType:

slide slides in from the bottom
fade fades into view
none appears without an animation

(2)onRequestClose:
The onRequestClose prop allows passing a function that will be called once the modal has been dismissed.
On the Android platform, this is a required function.
(3)onShow:
The onShow prop allows passing a function that will be called once the modal has been shown.
(4)transparent:
The transparent prop determines whether your modal will fill the entire view. Setting this to true will render the modal over a transparent background.
(5)visible:
The visible prop determines whether your modal is visible.

import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View } from 'react-native';

class ModalExample extends Component {

  constructor(props) {
    super(props);
    this.state = {modalVisible: false};
  }

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={{marginTop: 22}}>
        <Modal
          animationType={"slide"}
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {alert("Modal has been closed.")}}
          >
         <View style={{marginTop: 22}}>
          <View>
            <Text>Hello World!</Text>

            <TouchableHighlight onPress={() => {
              this.setModalVisible(!this.state.modalVisible)
            }}>
              <Text>Hide Modal</Text>
            </TouchableHighlight>

          </View>
         </View>
        </Modal>

        <TouchableHighlight onPress={() => {
          this.setModalVisible(true)
        }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>

      </View>
    );
  }
}

9.Picker

import React, { Component } from 'react';  
import { StyleSheet, Text, View, Image, PiexRatio, TouchableOpacity, Picker } from 'react-native';  
  
export default class MyPicker extends Component {  
  constructor(props) {
    super(props);
    this.state = {
      language: '',
      dropdown: ''
    }
  }
  onValueChange(flag, value, index){
    console.log(index);// 0 1 2 3
    if(flag == 1){
      this.setState({language:value});
    }else{
      this.setState({dropdown:value});
    }
  }

  render() {  
    return (  
       <View style={{ }}>
          <Text>Picker组件</Text>
          <Picker
            selectedValue={this.state.language}
            onValueChange={(value, index) => this.onValueChange(1,value,index)}
            mode="dialog"
            style={{color:'#f00', width:150}}
            prompt="对话框标题"
            >
            <Picker.Item label="Java" value="Java"/>
            <Picker.Item label="JavaScript" value="js"/>
            <Picker.Item label="C语言" value="c"/>
            <Picker.Item label="PHP开发" value="php"/>
          </Picker>
          <Picker
            mode={'dropdown'}
            style={{width:150}}
            selectedValue={this.state.dropdown}
            onValueChange={(value, index)=>this.onValueChange(2,value,index)}>
            <Picker.Item label="我是下拉菜单1" value="key0" />
            <Picker.Item label="我是下拉菜单2" value="key1" />
            <Picker.Item label="我是下拉菜单3" value="key2" />
            <Picker.Item label="我是下拉菜单4" value="key3" />
            </Picker>
          <Text style={{ height: 30 }}>{this.state.language}</Text>
          <Text style={{ height: 30 }}>{this.state.dropdown}</Text>
        </View>
    );  
  }  
}    

10.SegmentedControlIOS

使用SegmentedControlIOS来在iOS设备上渲染一个UISegmentedControl组件。这是一个分段显示多个选项的组件。

<SegmentedControlIOS style={{marginTop:20}} tintColor="#00ff00"  momentary={true} values={['One', 'Two', 'Three']} onChange={(e)=>alert(e)} onValueChange={(value)=>alert(value)} selectedIndex={1}/> 

11.Slider

用于选择一个范围值的组件。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Slider,
  View
} from 'react-native';

export default class SliderDemoextendsComponent extends Component {
  constructor(){
    super()
    this.state={
      slideCompletionValue: 50,
    }
  }
 
  render() {
      return (
        <View style={styles.container}>
            <Slider
              style={{width:200}}
              maximumValue={100}
              minimumValue={0}
              step={1}
              value={50}
              maximumTrackTintColor='#f00'
              onSlidingComplete={(value)=>this.setState({slideCompletionValue:value})}
            >
            </Slider>
            <Text>选择的值：{this.state.slideCompletionValue}</Text>
        </View>
      );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

12.StatusBar

<View>
    <StatusBar
        animated={true}
        hidden={false}
        backgroundColor={'blue'}
        translucent={true}
        barStyle={'default'}
        showHideTransition={'fade'}
        networkActivityIndicatorVisible={true}
    />
</View>

13.Switch

constructor(){
    super();
    this.state={
      trueSwitchIsOn: true,
      falseSwitchIsOn: false,
    }
  }
  render() {
    return (
       <View style={styles.container}>
        <Text>
           Swtich实例
        </Text>
        <Switch
          onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
          style={{marginBottom:10,marginTop:10}}
          onTintColor='#f00'
          thumbTintColor='#00f'
          tintColor='#0f0'
          value={this.state.falseSwitchIsOn} />
        <Switch
          onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
          value={this.state.trueSwitchIsOn} />
      </View>
    );
  }

14.Text

(1)adjustsFontSizeToFit(bool):指定字体是否随着给定样式的限制而自动缩放。
(2)allowFontScaling(bool):控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。
(3)numberOfLines(number):用来当文本过长的时候裁剪文本。包括折叠产生的换行在内，总的行数不会超过这个属性的限制。
(4)onLayout(function):当挂载或者布局变化以后调用，参数为如下的内容：
{nativeEvent: {layout: {x, y, width, height}}}
(5)onLongPress(function):当文本被长按以后调用此回调函数。
(6)onPress(function):当文本被点击以后调用此回调函数。
(7)selectable(bool):决定用户是否可以长按选择文本，以便复制和粘贴。

15.TextInput

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。
TextInput在安卓上默认有一个底边框，同时会有一些padding。如果要想使其看起来和iOS上尽量一致，则需要设置padding: 0，同时设置underlineColorAndroid="transparent"来去掉底边框。
属性:
(1)autoCapitalize(enum('none', 'sentences', 'words', 'characters')):
控制TextInput是否要自动将特定字符切换为大写：

characters: 所有的字符。
words: 每个单词的第一个字符。
sentences: 每句话的第一个字符（默认）。
none: 不自动切换任何字符为大写。

(2)autoCorrect(bool):
如果为false，会关闭拼写自动修正。默认值是true。
(3)autoFocus(bool):
如果为true，在componentDidMount后会获得焦点。默认值为false。
(4)blurOnSubmit(bool):
如果为true，文本框会在提交的时候失焦。对于单行输入框默认值为true，多行则为false。注意：对于多行输入框来说，如果将blurOnSubmit设为true，则在按下回车键时就会失去焦点同时触发onSubmitEditing事件，而不会换行。
(5)caretHidden(bool):
如果为true，则隐藏光标。默认值为false
(6)defaultValue(string):
提供一个文本框中的初始值。当用户开始输入的时候，值就可以改变。
在一些简单的使用情形下，如果你不想用监听消息然后更新value属性的方法来保持属性和状态同步的时候，就可以用defaultValue来代替。
(7)editable(bool):
如果为false，文本框是不可编辑的。默认值为true。
(8)keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search')
决定弹出的何种软键盘的，譬如numeric（纯数字键盘）。
这些值在所有平台都可用：

default
numeric
email-address

(9)maxLength(number):
限制文本框中最多的字符数。使用这个属性而不用JS逻辑去实现，可以避免闪烁的现象。
(10)multiline(bool):
如果为true，文本框中可以输入多行文字。默认值为false。
(11)onBlur(function):
当文本框失去焦点的时候调用此回调函数。
(12)onChange(function):
当文本框内容变化时调用此回调函数。
(13)onChangeText(function):
当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。
(14)onEndEditing(function):
当文本输入结束后调用此回调函数。
(15)onFocus(function):
当文本框获得焦点的时候调用此回调函数。
(16)onLayout(function):
当组件挂载或者布局变化的时候调用，参数为{x, y, width, height}。
(17)onSubmitEditing(function):
此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true}，此属性不可用。
(18)placeholder(string):
如果没有任何文字输入，会显示此字符串。
(19)placeholderTextColor(color):
占位字符串显示的文字颜色。
(20)style
(21)value:文本框中的文字内容。
(22)secureTextEntry(bool):
如果为true，文本框会遮住之前输入的文字，这样类似密码之类的敏感文字可以更加安全。默认值为false。
(23)selectTextOnFocus(bool):
如果为true，当获得焦点的时候，所有的文字都会被选中。
(24)selection({start: number, end: number}):
The start and end of the text input's selection. Set start and end to the same value to position the cursor.
(25)selectionColor(color):
设置输入框高亮时的颜色（在iOS上还包括光标）
方法：
(1)isFocused()(boolean):
返回值表明当前输入框是否获得了焦点。
(2)clear():清空输入框的内容。

16.按钮

(1)TouchableHighlight
(2)TouchableNativeFeedback
(3)TouchableOpacity
(4)TouchableWithoutFeedback
(5)Button

17.View

18.ViewPagerAndroid

一个允许在子视图之间左右翻页的容器。每一个ViewPagerAndroid的子容器会被视作一个单独的页，并且会被拉伸填满ViewPagerAndroid。

<ViewPagerAndroid
  style={styles.viewPager}
  initialPage={0}>
  <View style={styles.pageStyle}>
    <Text>First page</Text>
  </View>
  <View style={styles.pageStyle}>
    <Text>Second page</Text>
  </View>
</ViewPagerAndroid>

19.WebView

 <WebView source={{uri: 'http://www.baidu.com'}} />