前言
这篇文章来了解一下输入框组件TextInput和按钮Button的使用，并结合之前的FlexBox布局来搭建一个简单的登录界面！
废话不多说，先上效果图！
输入框组件TextInput
TextInput是一个允许用户输入文本的基础组件。在Android中对应的就是EditText控件。
属性
autoCapitalize控制TextInput是否要自动将特定字符切换为大写。它的取值有以下4个enum：
autoCorrect如果为false，会关闭拼写自动修正。默认值是true。autoFocus如果为true，在componentDidMount后会获得焦点。默认值为false。caretHidden如果为true，则隐藏光标。默认值为falsedefaultValue提供一个文本框中的初始值。当用户开始输入的时候，值就可以改变。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'来看看社区其他人的作品。
TouchableOpacityTouchableHighlightTouchableNativeFeedback
还有一个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}是一样的！
④<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 }
)
结语
本篇了解了输入框和按钮的定制，并搭建了一个简单的登录界面！涉及到的内容还是蛮多的！需要我们慢慢去理解消化！
好了，先这样了，我们下一篇再见！
