React Native入门(五)之使用输入框TextInput,按钮Button搭建登录界面

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/aiynmimi/article/details/75669482

前言

这篇文章来了解一下输入框组件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时,为元素的某一个边添加边框样式(例如:borderBottomColorborderLeftWidth等)将不会生效。为了能够实现效果你可以使用一个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()的几个属性!
先说两个最常用的onChangeTextonSubmitEditing
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 }
)

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

结语

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

好了,先这样了,我们下一篇再见!

展开阅读全文

没有更多推荐了,返回首页