react-native 经常使用组件
组件php
1.ActivityIndicator
显示一个圆形的loading提示符号。
属性：
(1)animating(bool): 是否要显示指示器，默认为true，表示显示;
(2)color(string): 滚轮的前景颜色;
(3)(ios)hidesWhenStopped(bool): 在没有动画的时候，是否要隐藏指示器(默认为true);
(4)size(enum('small', 'large')): 指示器的大小。small的高度为20，large为36。react
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
仅限安卓平台android
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文件中根据须要手动添加如下模块：ios
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')):决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。web
[1]cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（若是容器有padding内衬的话，则相应减去）。译注：这样图片彻底覆盖甚至超出容器，容器中不留任何空白。 [2]contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（若是容器有padding内衬的话，则相应减去）。译注：这样图片彻底被包裹在容器中，容器中可能留有空白。 [3]stretch: 拉伸图片且不维持宽高比，直到宽高都恰好填满容器。 [4]repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。 [5]center: 居中不拉伸。
(6)source {uri: string}:uri是一个表示图片的资源标识的字符串，它能够是一个http地址或是一个本地文件路径（使用require(相对路径)来引用）。
(7)stylereact-native
4.KeyboardAvoidingView
本组件用于解决一个常见的尴尬问题：手机上弹出的键盘经常会挡住当前的视图。本组件能够自动根据键盘的位置，调整自身的position或底部的padding，以免被遮挡。api
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'}} />
- 1. ReactNative: 使用网页组件WebView组件
- 2. 1.1.5Angular2经常使用组件
- 3. react 经常使用组件
- 4. Android经常使用组件
- 5. java经常使用组件
- 6. Unity2D经常使用组件
- 7. cocos 经常使用组件
- 8. JMeter经常使用组件
- 9. SpringCloud 经常使用组件
- 10. Kettle — 经常使用组件使用
- 更多相关文章...
- • PHP 常量数组 - PHP 7 新特性
- • ASP AdRotator 组件 - ASP 教程
- • Composer 安装与使用
- • 常用的分布式事务解决方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. ReactNative: 使用网页组件WebView组件
- 2. 1.1.5Angular2经常使用组件
- 3. react 经常使用组件
- 4. Android经常使用组件
- 5. java经常使用组件
- 6. Unity2D经常使用组件
- 7. cocos 经常使用组件
- 8. JMeter经常使用组件
- 9. SpringCloud 经常使用组件
- 10. Kettle — 经常使用组件使用