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

最新推荐文章于 2023-05-04 10:33:31 发布

木大白易

最新推荐文章于 2023-05-04 10:33:31 发布

阅读量9.5k

点赞数 2

分类专栏： React Native入门 React Native入门文章标签： react-native TextInput Button 布局

本文链接：https://blog.csdn.net/aiynmimi/article/details/75669482

版权

React Native入门同时被 2 个专栏收录

19 篇文章 6 订阅

订阅专栏

React Native入门

15 篇文章 3 订阅

订阅专栏

前言

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

好了，我们再来看下，输入内容，点击按钮之后的效果：
这里写图片描述

结语

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

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

木大白易

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
React Native入门（五）之使用输入框TextInput，按钮Button搭建登录界面

前言这篇文章来了解一下输入框组件TextInput和按钮Button的使用，并结合之前的Flexbox布局来搭建一个简单的登录界面！废话不多说，先上效果图！输入框组件TextInputTextInput是一个允许用户输入文本的基础组件。在Android中对应的就是EditText控件。属性autoCapitalize 控制TextInput是否要自动将特定字符...
复制链接

扫一扫