组件
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'}} /> (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|