组件
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',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,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,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,textAlign: 'right'}}>World!</Text>
<Text style={{margin: 10,textAlign: 'left'}}>往左边滑动</Text>
</View>
<TouchableHighlight
onPress={()=>this.openDrawer()}
style={{padding:10,backgroundColor:'#e6e6e6'}}>
<Text style={{textAlign:'center',}}>
openDrawer:打开抽屉
</Text>
</TouchableHighlight>
<TextInput style={{width:410,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,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',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',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,}}>
<Text>
网络数据错误，点击再试
</Text>
</View>
</TouchableOpacity>
);
}
else if(rowData.loadEnd){
return (
<View style={{flex:1,}}>
<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',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,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,Image,PiexRatio,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,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,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,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,});
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,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,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'}} /> 原文链接：https://www.f2er.com/react/304388.html