React Native 组件之TextInput
2016-10-05 09:58
447 查看
React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性。
完整源码下载:https://github.com/pheromone/React-Native-1
/** * 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
相关文章推荐
- React Native的TextInput组件去掉下划线和使用背景图片
- react native 的TextInput组件问题
- React Native之TextInput组件解析示例
- React Native控件之TextInput组件介绍以及实际登录界面实现
- React Native之TextInput组件实现联想输入
- 使你的TextInput组件只能输入数字.
- React Native之TextInput限制只能输入数字和小数
- React Native组件之Text
- React Native学习笔记(3)--TextInput组件
- Flex中TextInput组件如何设置限制某些字符的输入
- [转]FLex组件TextInput比较有用的属性
- React-Native的TextInput组件的设置以及获取输入框的内容
- React Native 学习之Text组件
- React Native控件只TextInput
- ReactNative中TextInput组件
- React Native组件之Text
- React Native(十)——TextInput一点小结
- React Native开发之——组件TextInput(2)
- android TextInputLayout组件的使用
- React Native控件只TextInput