前言
学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习
本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢
文章第一版出自，如果出现图片或页面显示问题，烦请转至 查看 也希望喜欢的朋友可以点赞，谢谢
TextInput 文本输入框
React Native中的文本输入框使用和iOS比较相近，可能是因为 RN 首先封装iOS端的缘故（这点对iOS开发者来说是个好消息）
TextInput也是继承自 View,所以 View 的属性 TextInput 也能使用，一些样式类的属性可以参照 View 的相关属性
为了更好的讲解 TextInput，先创建一个基本的文本输入框
// 视图
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
);
}
});
// 样式
var styles = StyleSheet.create({
container: {
flex:1
},
textInputStyle: {
// 设置尺寸
width:width,
height:40,
marginTop:100,
// 设置背景颜色
backgroundColor:'green'
}
});
效果：
初始化效果.gif
- Value：文本输入的默认值（注：如果设置了此属性，会造成无法输入的尴尬，一般会搭配JS动态设置）
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
);
}
});
效果：
设置了Value.gif
- keyboardType：设置键盘类型（决定使用哪种键盘）
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
);
}
});
效果：
设置键盘类型.gif
- multiline：如果值为真，文本输入可以输入多行，默认值为假
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
);
}
});
效果：
多行输入.gif
- password：如果值为真，文本输入框就成为一个密码区域，默认值为假
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
);
}
});
效果：
密码模式.gif
- placeholder：在文本输入之前提示用户文本框功能，也就是占位文字
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
);
}
});
效果：
占位文字.gif
- placeholderTextColor：占位字符串的文本颜色
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
);
}
});
效果：
占位文字颜色.gif
-
autoCapitalize：控制TextInput是否要自动将特定字符切换为大写
- none：不自动使用任何东西
- sentences：每个句子的首字母（默认）
- words：每一个单词的首字母
- characters：所有字符
var textInputTest = React.createClass({ render(){ return({/* 文本输入框 */} ); } });{/* 文本输入框 */} {/* 文本输入框 */} {/* 文本输入框 */}
效果：
autoCapitalize.gif
- autoCorrect：如果为false，会关闭拼写自动修正。默认值是true。
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
);
}
});
效果：
autoCorrect.gif
- autoFocus：如果为true，在componentDidMount后会获得焦点。默认值为false。
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
);
}
});
效果：
autoFocus.gif
-
clearButtonMode：清除按钮出现的时机
- never：不出现
- while-editing：编辑的时候出现
- unless-editing：没有编辑时出现
- always：总是出现
var textInputTest = React.createClass({ render(){ return({/* 文本输入框 */} ); } });{/* 文本输入框 */} {/* 文本输入框 */} {/* 文本输入框 */}
效果：
clearButtonMode.gif
-
clearTextOnFocus：如果为true，每次开始输入的时候都会清除文本框的内容
var textInputTest = React.createClass({ render(){ return({/* 文本输入框 */} ); } });
效果：
clearTextOnFocus.gif
- editable：如果值为假，文本是不可编辑，默认值为真
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
);
}
});
效果：
editable.gif
- enablesReturnKeyAutomatically：如果为true，键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false。
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
);
}
});
效果：
enablesReturnKeyAutomatically.gif
-
returnKeyType：决定返回键的样式
- default
- go
- join
- next
- route
- search
- send
- yahoo
- done
- emergency-call
var textInputTest = React.createClass({ render(){ return({/* 文本输入框 */} ); } });{/* 文本输入框 */} {/* 文本输入框 */}
效果：
returnKeyType.gif
- secureTextEntry：如果值为真，文本输入框就会使输入的文本变模糊，以便于像密码这样敏感的文本保持安全，类似 password 属性，默认值为假
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
);
}
});
效果：
secureTextEntry.gif
- onChange：当文本框内容变化时调用此回调函数
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
{alert('文本框内容改变')}}
>
);
}
});
效果：
onChange.gif
- onChangeText：当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
{alert('文字改变')}}
>
);
}
});
效果：
onChangeText.gif
- onFocus：当文本框获得焦点的时候调用此回调函数
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
{alert('文本框获得焦点')}}
>
);
}
});
效果：
onFoucs.gif
- onBlur：当文本框失去焦点的时候调用此回调函数
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
{alert('失去焦点')}}
>
);
}
});
效果：
onBlur.gif
- onEndEditing：结束编辑时，调用回调函数
var textInputTest = React.createClass({
render(){
return(
{/* 文本输入框 */}
{alert('结束文本编辑')}}
>
);
}
});
效果：
onEndEditing.gif