您的位置:首页 > Web前端 > React

React Native 组件之TextInput

2016-10-05 09:58 447 查看
React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性。

/**
* Sample React Native App
* https://github.com/facebook/react-native * 周少停 2016-09-16
* TextInput 常用属性
*/

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

class Project extends Component {
render() {
return (
<View style={styles.container}>
<TextInput style={styles.inputStyle}
//value={'我是默认的'}     /*该文字无法删除*/
keyboardType = {'number-pad'} //弹出键盘类型
multiline = {true}   //多行显示,默认false:单行显示
//          password = {true}     //密码 多行文本不显示密码
placeholder = {'我是占位文字'}  //占位文字
placeholderTextColor = 'red'  //占位文字颜色
autoCapitalize = {'characters'} //通知文本输入自动利用某些字符
clearButtonMode = {'always'}    //右侧的清除模式
autoCorrect = {false} //禁用自动校正 默认值true开启自动校正
// editable = {false} // 是否可编辑 默认为true可编辑
// retrunKeyType = {'go'} //返回键类型
/>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
inputStyle:{
height:60,
marginTop:20,
borderWidth:1,
borderColor:'black'
}
});

AppRegistry.registerComponent('Project', () => Project);


  完整源码下载:https://github.com/pheromone/React-Native-1
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: