前言

这篇文章来了解一下输入框组件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}是一样的！
④<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 }
)

好了，我们再来看下，输入内容，点击按钮之后的效果：

结语

本篇了解了输入框和按钮的定制，并搭建了一个简单的登录界面！涉及到的内容还是蛮多的！需要我们慢慢去理解消化！

好了，先这样了，我们下一篇再见！

React Native入门（五）之使用输入框TextInput，按钮Button搭建登录界面

前言

输入框组件TextInput

属性

按钮Button

定制Button按钮

简单登录界面的搭建

结语

猜你在找的React相关文章