React Native入门（五）之使用输入框TextInput，按钮Button搭建登录界面前言输入框组件TextInput按钮Button简单登录界面的搭建结语

48 阅读 0 评论 32 点赞

我是靠谱客的博主不安电灯胆，最近开发中收集的这篇文章主要介绍React Native入门（五）之使用输入框TextInput，按钮Button搭建登录界面前言输入框组件TextInput按钮Button简单登录界面的搭建结语，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前言

这篇文章来了解一下输入框组件TextInput和按钮Button的使用，并结合之前的Flexbox布局来搭建一个简单的登录界面！

废话不多说，先上效果图！
这里写图片描述

输入框组件TextInput

TextInput是一个允许用户输入文本的基础组件。在Android中对应的就是EditText控件。

属性

autoCapitalize 控制TextInput是否要自动将特定字符切换为大写。它的取值有以下4个enum：
- 'characters': 所有的字符。
- 'words': 每个单词的第一个字符。
- 'sentences': 每句话的第一个字符（默认）。
- 'none': 不自动切换任何字符为大写。
autoCorrect 如果为false，会关闭拼写自动修正。默认值是true。
autoFocus如果为true，在componentDidMount后会获得焦点。默认值为false。
caretHidden如果为true，则隐藏光标。默认值为false
defaultValue提供一个文本框中的初始值。当用户开始输入的时候，值就可以改变。
editable如果为false，文本框是不可编辑的。默认值为true。
maxLength 限制文本框中最多的字符数。使用这个属性而不用JS逻辑去实现，可以避免闪烁的现象。
multiline如果为true，文本框中可以输入多行文字。默认值为false。
当multiline=false时，为元素的某一个边添加边框样式（例如：borderBottomColor，borderLeftWidth等）将不会生效。为了能够实现效果你可以使用一个View来包裹TextInput。
placeholder 如果没有任何文字输入，会显示此字符串。(同Android中的hint)
placeholderTextColor占位字符串显示的文字颜色。
secureTextEntry 如果为true，文本框会遮住之前输入的文字，这样类似密码之类的敏感文字可以更加安全。默认值为false。

下边两个属性呢，在Android环境下使用，为了统一，可以与iOS端一致！

numberOfLines 设置输入框的行数。当multiline设置为true时使用它，可以占据对应的行数。
underlineColorAndroid 文本框的下划线颜色(译注：如果要去掉文本框的边框，请将此属性设为透明transparent)。
使用：underlineColorAndroid={'transparent'}

还有需要注意的地方就是：
①TextInput在安卓上默认有一个底边框，同时会有一些padding。如果要想使其看起来和iOS上尽量一致，则需要设置padding: 0
②在安卓上如果设置multiline = {true}，文本默认会垂直居中，可设置textAlignVertical: 'top'样式来使其居顶显示。

下边是属性值为function()的几个属性！
先说两个最常用的onChangeText和onSubmitEditing。
onChangeText：属性接受一个函数，而此函数会在文本变化时被调用，改变后的文字内容会作为参数传递。
这个属性，在我们要读取用户输入，得到输入框内容的时候，会用到！（注意，从TextInput里取值这就是目前唯一的做法！），具体的做法就是使用onChangeText写入state，然后从this.state中取出值。，下边的登录界面示例中也会有，具体可以看下边示例！

onSubmitEditing：会在文本被提交后（用户按下软键盘上的提交键）调用。需要注意的是，如果multiline={true}，此属性不可用。

其他的属性，这里就不一一列举了，用到的时候可以查看官方文档。

按钮Button

在RN v0.46版本，添加了<Button>组件，在此之前是没有的！
我试了一下<Button>组件的使用，非常简单：

<Button

onPress={onPressed}
title="Login"
color="green"
accessibilityLabel="Learn more about this button"
/>

主要就是以上4个属性：
- onPress：接收一个点击事件function。
- title：按钮要显示的文字。
- color：按钮的背景颜色（Android），文本的颜色（iOS）。
- accessibilityLabel：用于给残障人士显示的文本（比如读屏器软件可能会读取这一内容）

就长这样：
这里写图片描述

这里有一个问题很奇葩，就是它不能自己设置宽高，更确切的说这个按钮的高度是固定的，而宽度呢跟它的父容器的宽度一致！！！！宽高都不能自己设置，更别说我们设置它的样式了！WTF！
不知道是不是我自己理解有误！求指教！

所以，更多的时候，是需要我们自己定制需要的按钮的！而不是用它这个<Button>组件。

定制Button按钮

我们可以使用三个组件来制作自己所需要的按钮！或者也可以在github.com网站上搜索'react native button'来看看社区其他人的作品。

TouchableOpacity
TouchableHighlight
TouchableNativeFeedback

还有一个TouchableWithoutFeedback，官方不推荐使用！
这里以TouchableOpacity为例说一下如何定制Button。

<TouchableOpacity

activeOpacity={0.5}
style={LoginStyles.login}
onPress={this.onButtonPress.bind(this)}>
<Text style={{fontSize:15,color:'white',fontWeight:'bold'}}>
登录
</Text>
</TouchableOpacity>

简单的使用呢，就是使用<TouchableOpacity>组件来嵌套一个<Text>文本，文本是按钮显示的文字！
activeOpacity属性指定封装的视图在被触摸操作激活时以多少不透明度显示（通常在0到1之间）。
style属性来指定按钮的样式。（我们想要的按钮样式，就要在这里设置，比如圆角，宽高等）
onPress属性，接收点击事件function。跟<Button>组件一样！

至于其他两个组件的定制，就不再提了，可以查阅文档了解一下！

简单登录界面的搭建

下面就输入框TextInput和定制的按钮，来搭建一个简单的登录界面。效果图呢，在文章开头已经有了，下面直接看代码：

import React, { Component } from 'react';
import {
AppRegistry,
Image,
StyleSheet,
Text,
TextInput,
Alert,//简单的JS弹出框
TouchableOpacity,
Dimensions,//获取屏幕宽高
View
} from 'react-native';
var width = Dimensions.get('window').width;//得到屏幕宽度
class LoginComponent extends Component {
//构造函数
constructor(props) {
super(props);
//两个状态用户输入框文本，密码框文本
this.state = {user_text: '',pass_text: ''};
}
//点击事件函数
onButtonPress ()
{
Alert.alert('用户输入信息','您输入的手机号/魅族账号为：'+this.state.user_text+'，输入的密码为：'+this.state.pass_text);
};
render() {
return (
<View style={LoginStyles.container}>
<Image source={require('./img/flyme5_logo.png')}//项目中的图片
style={LoginStyles.logoImg}/>
<TextInput
placeholder="手机号/魅族账号"
underlineColorAndroid={'transparent'}//去掉下划线
style={LoginStyles.username}
//将文本写入state
onChangeText={(user_text) => this.setState({user_text})}/>
<TextInput
placeholder="密码"
secureTextEntry={true}//隐藏输入内容
underlineColorAndroid={'transparent'}
style={LoginStyles.username}
onChangeText={(pass_text) => this.setState({pass_text})}/>
<TouchableOpacity
activeOpacity={0.5}//点击时的透明度
style={LoginStyles.login}
//点击事件，要记得绑定
onPress={this.onButtonPress.bind(this)}>
<Text style={{fontSize:15,color:'white',fontWeight:'bold'}}>
登录
</Text>
</TouchableOpacity>
</View>
);
}
};
const LoginStyles = StyleSheet.create({
container:{
flex: 1,
flexDirection: 'column',
justifyContent: 'center'
},
logoImg: {
width:100,
height:108,
alignSelf:'center',//设置子控件的位置居中
marginBottom:60
},
username: {
width:width-32,//居中，宽度为屏幕宽度-32，这样左右都有16的边距
borderRadius: 20,//输入框边界圆角度数
borderColor: 'skyblue',//输入框边界颜色
marginBottom:16,
paddingLeft:10,//这里是为了在圆角之后输入
padding:0,//去掉Android默认的padding
borderWidth: 1,
alignSelf:'center'//自身居中
},
login :{
width:width-32,
height:35,
borderRadius: 20,//按钮圆角
alignSelf:'center',
backgroundColor:'skyblue',
marginTop:20,
justifyContent:'center',
alignItems:'center'//显示Text组件居中
},
});
AppRegistry.registerComponent('AwesomeProject', () => ButtonTest);

好了，具体的内容呢，上边代码中注释已经很清楚了！
有几块这里再强调一下：
①var {height, width} = Dimensions.get('window');可以得到屏幕的宽高。
如果要得打屏幕的像素,可以用：var pi=PixelRatio.get();
②onChangeText={(text) => this.setState({text})是唯一的得到输入框内容的方法！
③按钮点击事件要想得到state中的值，需要调用bind()方法进行绑定！
onPress={this.onButtonPress.bind(this)}
或者我们在构造器中bind：
this.onButtonPress=this.onButtonPress.bind(this);
然后在使用：onPress={this.onButtonPress}是一样的！

2018/3/1更新：
首先在JavaScript中，this对象是运行时基于函数的执行环境（也就是上下文）绑定的。如果我们用ES5的语法去写的话，就不存在绑定this的说法，因为在ES5中会默认自动绑定，但是在ES6中就取消了auto binding，就需要我们手动bind！如果不绑定this，this.onButtonPress方法的this就会指向全局，绑定了this之后将this绑定到组件实例之上！

需要注意的问题就是：bind方法每运行一次就返回一个新的函数，在react中也就是每次render都会创建一个新的函数，影响性能！
上边提到的在构造器中进行bind，这样就不会创建新的函数！但是这样还是很繁琐，那么有没有更好的写法呢？有，那就是使用箭头函数！

onButtonPress = () => {
xxxxxx
};
onPress={this.onButtonPress}

箭头函数不会创建自身的this上下文，this就指向组件实例。建议就用箭头函数，代码也会精简很多。
关于bind(this)更多的理解，请参考下面一篇文章，讲解的比较清晰！
理解React中es6方法创建组件的this

另外提一下：
使用ES6语法来创建组件是不支持React mixins的，如果一定要使用React mixins就只能使用React.createClass方法（ES5的写法）来创建组件了。

④<Text>组件设置fontWeight:'bold'为粗体！这些属性都是基本的，需要的话查阅文档就可以！
⑤Alert弹出框，alert()方法在Android平台有4个参数（iOS平台多了一个AlertType），第一个参数为标题，第二个参数为内容，第三个参数为一个下边的按钮数组，第四个参数为弹出框的选项。
具体的使用：

Alert.alert(
'Alert Title',
'My Alert Msg',
[
{text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)