React Native控件只TextInput

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等。

比如官网最简单的写法:

import React, { Component } from 'react';
import { AppRegistry, TextInput } from 'react-native';

class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Useless Placeholder' };
  }

  render() {
    return (
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />
    );
  }
}

// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);

对于TextInput我们重点需要了解控件的属性,以方便我们实行不同的效果。

TextInput属性

autoCapitalize enum('none', 'sentences', 'words', 'characters') 

控制TextInput是否要自动将特定字符切换为大写:

  • characters: 所有的字符。
  • words: 每个单词的第一个字符。
  • sentences: 每句话的第一个字符(默认)。
  • none: 不自动切换任何字符为大写。

autoCorrect bool

如果为false,会关闭拼写自动修正。默认值是true。

autoFocus bool

如果为true,在componentDidMount后会获得焦点。默认值为false。

blurOnSubmit bool 

如果为true,文本框会在提交的时候失焦。对于单行输入框默认值为true,多行则为false。注意:对于多行输入框来说,如果将blurOnSubmit设为true,则在按下回车键时就会失去焦点同时触发onSubmitEditing事件,而不会换行。

defaultValue string

提供一个文本框中的初始值。当用户开始输入的时候,值就可以改变。在一些简单的使用情形下,如果你不想用监听消息然后更新value属性的方法来保持属性和状态同步的时候,就可以用defaultValue来代替。

editable bool

如果为false,文本框是不可编辑的。默认值为true。

keyboardType

决定弹出的何种软键盘的,譬如numeric(纯数字键盘)。 这些值在所有平台都可用

  • default
  • numeric
  • email-address

multiline bool

如果为true,文本框中可以输入多行文字。默认值为false。

onBlur function

当文本框失去焦点的时候调用此回调函数。

onChange function

当文本框内容变化时调用此回调函数。

onChangeText function

当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。

onEndEditing function

当文本输入结束后调用此回调函数。

onFocus function 

当文本框获得焦点的时候调用此回调函数。

onLayout function

当组件挂载或者布局变化的时候调用,参数为{x, y, width, height}。

onSubmitEditing function

此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true},此属性不可用。

placeholder string

如果没有任何文字输入,会显示此字符串。

placeholderTextColor string 占位字符串显示的文字颜色。

secureTextEntry bool 如果为true,文本框会遮住之前输入的文字,这样类似密码之类的敏感文字可以更加安全。默认值为false。

selectTextOnFocus bool

如果为true,当获得焦点的时候,所有的文字都会被选中。

selectionColor string

设置输入框高亮时的颜色(在iOS上还包括光标)占位字符串显示的文字颜色。 secureTextEntry bool  如果为true,文本框会遮住之前输入的文字,这样类似密码之类的敏感文字可以更加安全。默认值为false。

selectTextOnFocus bool

如果为true,当获得焦点的时候,所有的文字都会被选中。

selectionColor string

设置输入框高亮时的颜色(在iOS上还包括光标)

style Text#style 

译注:这意味着本组件继承了所有Text的样式。

value string

文本框中的文字内容。 TextInput是一个受约束的(Controlled)的组件,意味着如果提供了value属性,原生值会被强制与value属性保持一致。在大部分情况下这都工作的很好,不过有些情况下会导致一些闪烁现象——一个常见的原因就是通过不改变value来阻止用户进行编辑。如果你希望阻止用户输入,可以考虑设置editable={false};如果你是希望限制输入的长度,可以考虑设置maxLength属性,这两个属性都不会导致闪烁。

关于TextInput的属性就讲这么多,下面写一个登录的例子来加强我们对控件的认识。

这里需要说明几点:

1、<TextInput>组件在React Native中,默认是带一条横线的,如果想去掉输入框下面的横线,需要给<TextInput>指定一个underlineColorAndroid='transparent',这样就可以去掉输入框下面的横线了;

2、密码输入框需要指定属性:secureTextEntry={true}

3、要显示图片,必须为<Image>标签指定宽度和高度,和Android中不同的是,<Image>没法自动调整图片的大小,没有类似Android中的wrap_content。

代码如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Image,
    View,
    TextInput
} from 'react-native';

class ReactDemo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.headtitle}>添加账号</Text>
                </View>
                <View style={styles.marginTopview}/>

                <View style={styles.inputview}>
                    <TextInput underlineColorAndroid='transparent' style={styles.textinput} placeholder='QQ号/手机号/邮箱'/>
                    <View style={styles.dividerview}>
                        <Text style={styles.divider}></Text>
                    </View>
                    <TextInput underlineColorAndroid='transparent' style={styles.textinput} placeholder='密码'
                               secureTextEntry={true}/>
                </View>
                <View style={styles.bottomview}>
                    <View style={styles.buttonview}>
                        <Text style={styles.logintext}>登 录</Text>
                    </View>


                    <View style={styles.bottombtnsview}>
                        <View style={styles.bottomleftbtnview}>
                            <Text style={styles.bottombtn}>无法登录?</Text>
                        </View>
                        <View style={styles.bottomrightbtnview}>
                            <Text style={styles.bottombtn}>新用户</Text>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF'
    },
    header: {
        height: 50,
        backgroundColor: '#12B7F5',
        justifyContent: 'center',
    },
    headtitle: {
        alignSelf: 'center',
        fontSize: 20,
        color: '#ffffff',
    },
    avatarview: {
        height: 150,
        backgroundColor: '#ECEDF1',
        justifyContent: 'center',
    },
    avatarimage: {
        width: 100,
        height: 100,
        alignSelf: 'center'
    },
    marginTopview: {
        height: 15,
        backgroundColor: '#F7F7F9'
    },
    inputview: {
        height: 100,
    },
    textinput: {
        flex: 1,
        fontSize: 16,
    },
    dividerview: {
        flexDirection: 'row',
    },
    divider: {
        flex: 1,
        height: 1,
        backgroundColor: '#ECEDF1'
    },
    bottomview: {
        backgroundColor: '#ECEDF1',
        flex: 1,
    },
    buttonview: {
        backgroundColor: '#1DBAF1',
        margin: 10,
        borderRadius: 6,
        justifyContent: 'center',
        alignItems: 'center',
    },
    logintext: {
        fontSize: 17,
        color: '#FFFFFF',
        marginTop: 10,
        marginBottom: 10,
    },
    emptyview: {
        flex: 1,
    },
    bottombtnsview: {
        flexDirection: 'row',
    },
    bottomleftbtnview: {
        flex: 1,
        height: 50,
        paddingLeft: 10,
        alignItems: 'flex-start',
        justifyContent: 'center',
    },
    bottomrightbtnview: {
        flex: 1,
        height: 50,
        paddingRight: 10,
        alignItems: 'flex-end',
        justifyContent: 'center',
    },
    bottombtn: {
        fontSize: 15,
        color: '#1DBAF1',
    }
});

AppRegistry.registerComponent('ReactDemo', () => ReactDemo);

这里如果需要调试的话请移步:http://blog.csdn.net/xiangzhihong8/article/details/52564391

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

react.js 学习笔记

单向数据流驱动,父节点传递到子节点 react最重要是组件 ReactJS官方地址:https://facebook.github.io/react/ GitH...

21410
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:Poplist控件的正确打开方式以及如何快速实现

PopList控件显示包括两种模式:展开模式和筛选分类模式;两种模式只能选其中一种

942
来自专栏陈纪庚

手把手教你实现一个引导动画

最近看了一些文章,知道了实现引导动画的基本原理,所以决定来自己亲手做一个通用的引导动画类。

1061
来自专栏游戏杂谈

“穿透”层的鼠标事件

需要实现如下的效果,有一个浮动层,需要层级在它之下的一个元素也能照常响应相应的事件

1192
来自专栏老司机的简书

老司机读书笔记——Weex学习笔记

Weex整体上与Vue语法大概一直,基本用法由阿里进行二次封装。以下主要介绍Weex的一些内置组件。

2894
来自专栏Young Dreamer

一种实现无缝循环播放音乐方案

场景: 为了节省页面资源,往往需要将一段小音频循环播放,通常做法是在audio标签上添加loop属性,但不幸的是,该属性并不能保证无缝循环(gapless lo...

2838
来自专栏MasiMaro 的技术博文

SDK平台三态按钮的实现

Windows平台提供了丰富的控件,但是在使用中我们不会使用它提供的默认风格,有时候需要对控件进行改写,让它展现出更友好的一面,这次主要是说明三态按钮的实现。

1334
来自专栏前端小叙

对事件委托绑定click的事件的解绑

大家都知道解绑事件的jquery写法,很简单: $("xxx").unbind("click"); 然后对于事件委托式的事件绑定,亲测,这种解绑方法是无效的, ...

2836
来自专栏葡萄城控件技术团队

Spread for Windows Forms高级主题(2)---理解单元格类型

理解单元格类型基本信息 Spread支持几十种单元格类型,如复选框单元格、日期时间单元格、或者一个简单的文本单元格。单元格类型可以对单独的单元格、列、行、一个单...

1918
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:Poplist控件在APP中的应用场景以及代码

2103

扫码关注云+社区