ReactNative: 使用输入框TextInput组件

一、简介

一个应用程序中,输入框基本不可或缺,它衍生的搜索功能在很多APP中随处可见。在iOS开发中,使用的输入框组件是UITextView和UITextField,在React-Native中使用的则是TextInput组件。TextInput组件可以通过键盘将文本输入到APP的组件,它提供了如自动校验、占位符、键盘样式、焦点函数等很多丰富的功能。

二、API

TextInput组件提供的属性和事件基本能够满足开发需求,既可以使用它做基本的输入功能,也能做列表补全的搜索功能。TextInput组件主要属性和事件如下:

属性或者函数 作用
autoCapitalize
枚举类型,用于信息提示,可选值包括none、sentences、words、characters
placeholder
占位符,在输入前显示文本内容
value
文本框输入的内容
placeholderTextColor
占位符文本的颜色
password
如果为true,显示为密码输入框,文本显示为"*"号
multiline
如果为true,则是多行输入
editable
如果为false,文本框不可以输入,默认为true

keyboardType

   枚举类型,表示键盘类型,可选值包括‘default‘,‘email-address‘,‘numeric‘,‘phone-pad‘,‘ascii-capable‘,numbers-and-punctuation‘,‘url‘,‘number-pad‘,‘name-phone-pad‘,‘decimal-pad‘,‘twitter‘,‘web-search‘,
autoFocus
如果为true,将自动聚焦
clearButtonMode
枚举类型,用于显示清除按钮,可选值包括never、while-editing、unless-editing、always
maxLength
能够输入的最长字符数
enablesReturnKeyAutomatically
如果为true,表示无文本时键盘不显示返回键,默认为false
returnKeyType
枚举类型,表示键盘返回键显示的字符串,可选值包括default、go、google、join、next、route、search、send、yahoo、done、emergency-call
securityEntry
如果为true,则像密码框一样隐藏输入内容,默认为false
onchangeText
当文本的输入框内容发生改变时调用。它会接收一个文本的参数对象
onChange
当文本发生改变时,调用该函数
onEndEditing
当结束编辑时,调用该函数
onBlur
失去焦点触发事件
onFocus
获取焦点触发事件
onsubmitEditing
当结束编辑后,点击键盘的提交按钮时触发事件

三、使用

1、作为输入框

InputView.js

import React, { Component } from ‘react‘;

import {
    StyleSheet,
    View,
    Text,
    TextInput
} from ‘react-native‘

export default class InputView extends Component{

    constructor(props){
        super(props);
        this.state = {content:"当前无内容"}
    }

    render(){
        return (
            <View style={styles.flex}>
                <View style={styles.content}>
                    <Text style={styles.text}>{this.state.content}</Text>
                </View>
                <View style={styles.flex}>
                    <TextInput
                        style={styles.input}
                        placeholder=‘请输入您想要的东西‘
                        placeholderTextColor={"#CCC"}
                        returnKeyType=‘done‘
                        clearButtonMode=‘while-editing‘
                        enablesReturnKeyAutomatically={true}
                        editable={true}
                        maxLength={100}
                        keyboardType=‘default‘
                        onFocus={()=> console.log("--获取焦点触发事件--")}
                        onBlur={()=> console.log("--失去焦点触发事件--")}
                        onChange={() => console.log("---当文本发生改变时,调用该函数--")}
                        onEndEditing={() => console.log("--当结束编辑时,调用该函数--")}
                        onSubmitEditing={ () => console.log("--当结束编辑后,点击键盘的提交按钮时触发事件--")}
                        onChangeText={(text) => this.setState({content:text})}
                    />
                </View>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    flex:{
        flex: 1
    },
    content:{
        height: 200,
        backgroundColor:"red",
        justifyContent: ‘center‘,
        alignItems:‘center‘
    },
    input:{
        height:45,
        borderWidth: 1,
        marginTop: 20,
        marginRight:5,
        marginLeft: 5,
        paddingLeft: 5,
        borderColor:‘#CCC‘,
        borderRadius: 4
    },
    text:{
        fontSize:20,
        color:‘white‘,
        textAlign:‘center‘
    }
})

index.ios.js

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

import React, { Component } from ‘react‘;
import InputView from ‘./src/InputView‘

import {
  AppRegistry,
  View
} from ‘react-native‘;

export default class ReactNativeDemo extends Component {

  render() {
    return (
        <View style={{flex: 1}}>
          <InputView/>
        </View>
    );
  }
}

AppRegistry.registerComponent(‘ReactNativeDemo‘, () => ReactNativeDemo);

日志和gif如下:

2019-12-12 18:28:43.022 [info][tid:com.facebook.react.JavaScript] --获取焦点触发事件--
2019-12-12 18:28:48.992 [info][tid:com.facebook.react.JavaScript] ---当文本发生改变时,调用该函数--
2019-12-12 18:28:49.951 [info][tid:com.facebook.react.JavaScript] ---当文本发生改变时,调用该函数--
2019-12-12 18:28:51.016 [info][tid:com.facebook.react.JavaScript] ---当文本发生改变时,调用该函数--
2019-12-12 18:28:52.893 [info][tid:com.facebook.react.JavaScript] ---当文本发生改变时,调用该函数--
2019-12-12 18:28:55.243 [info][tid:com.facebook.react.JavaScript] --当结束编辑后,点击键盘的提交按钮时触发事件--
2019-12-12 18:28:55.248 [info][tid:com.facebook.react.JavaScript] --当结束编辑时,调用该函数--
2019-12-12 18:28:55.256 [info][tid:com.facebook.react.JavaScript] --失去焦点触发事件--

2、制作搜索框

InputSearchView.js

import React, { Component } from ‘react‘;

import {
    StyleSheet,
    View,
    Text,
    TextInput,
    PixelRatio
} from ‘react-native‘

export default class InputSearchView extends Component{

    constructor(){
        super();
        this.state = {show:false, keywords:""}
    }

    show = () => {
        this.setState({show:this.state.keywords.length>0})
    };

    render(){
        return (
            <View style={styles.flex}>
                <View style={[styles.flexDirection,styles.height]}>
                    <View style={styles.flex}>
                        <TextInput
                            value={this.state.keywords}
                            style={styles.input}
                            placeholder=‘请输入关键字‘
                            placeholderTextColor={"#CCC"}
                            returnKeyType=‘search‘
                            clearButtonMode=‘while-editing‘
                            enablesReturnKeyAutomatically={true}
                            onChangeText={ (text) => this.setState({keywords:text})}
                            onEndEditing={this.show.bind(this)}
                        />
                    </View>
                    <View style={styles.btn}>
                        <Text style={styles.text} onPress={this.show.bind(this)}>
                            搜索
                        </Text>
                    </View>
                </View>
                {
                    this.state.show?
                    <View style={styles.list}>
                        <Text style={styles.list_item}>I AM XYQ</Text>
                        <Text style={styles.list_item}>T FROM CHINA</Text>
                        <Text style={styles.list_item}>I AM 28 YEARS OLD</Text>
                        <Text style={styles.list_item}>WELCOME TO ME</Text>
                    </View> : null
                }

            </View>
        )
    }
}

const styles = StyleSheet.create({
    flex:{
        flex: 1
    },
    flexDirection:{
        flexDirection: ‘row‘
    },
    list:{
        marginTop: 28,
        height: 200,
        marginLeft: 5,
        marginRight: 5,
        borderColor:"red",
        borderTopWidth: 1/PixelRatio.get(),
    },
    list_item:{
        fontSize:20,
        fontWeight:‘bold‘,
        padding: 5,
        paddingTop: 10,
        paddingBottom: 10,
        borderWidth: 1/PixelRatio.get(),
        borderColor: ‘red‘,
        borderTopWidth: 0
    },
    height:{
        height: 45
    },
    input:{
        height:45,
        borderWidth: 1,
        fontSize:20,
        marginTop: 25,
        marginLeft: 5,
        paddingLeft: 5,
        borderColor:‘#CCC‘,
        borderRadius: 4
    },
    btn:{
        width:60,
        height:45,
        borderWidth: 1,
        marginTop: 25,
        marginRight: 5,
        paddingLeft: 5,
        backgroundColor:‘#23BEFF‘,
        borderColor:‘#CCC‘,
        borderTopRightRadius:4,
        borderBottomRightRadius:4,
        justifyContent: ‘center‘,
        alignItems:‘center‘
    },
    text:{
        fontSize:20,
        color:‘white‘,
        fontWeight:‘bold‘,
        textAlign:‘center‘
    }
})

index.ios.js

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

import React, { Component } from ‘react‘;
import InputSearchView from ‘./src/InputSearchView‘

import {
  AppRegistry,
  View
} from ‘react-native‘;

export default class ReactNativeDemo extends Component {

  render() {
    return (
        <View style={{flex: 1}}>
          <InputSearchView/>
        </View>
    );
  }
}

AppRegistry.registerComponent(‘ReactNativeDemo‘, () => ReactNativeDemo);

原文地址:https://www.cnblogs.com/XYQ-208910/p/12029641.html

时间: 2024-11-10 07:53:27

ReactNative: 使用输入框TextInput组件的相关文章

TextInput组件的常用属性

1.TextInput组件基本介绍: TextInput是一个允许用户在应用中通过键盘输入文本的基本组件.本组件的属性提供了多种特性的配置,譬如自动完成.自动大小写.占位文字,以及多种不同的键盘类型(如纯数字键盘)等等. 最简单的用法就是丢一个TextInput到应用里,然后订阅它的onChangeText事件来读取用户的输入.它还有一些其它的事件,譬如onSubmitEditing和onFocus.一个简单的例子如下: <TextInput style={{height: 40, border

react-native DatePicker日期选择组件的实现

本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenberg/react-native-custom-action-sheet (可以看看,也可以直接按我的步骤走) 1. 在terminal的该工程目录下运行: npm install react-native-custom-action-sheet --save 2. 然后运行: npm start 3.

一款基于react-native的弹窗提示组件

介绍一款基于react-native的弹窗提示插件 react-native-ms , github地址:https://github.com/jiangzhenfei/RNtips/tree/master 样式图 该组件还支持自己定义的icon组件 主要的使用法法如下 npm下载组件 npm install react-native-ms --save 在页面中使用 import { TipModal } from 'react-native-ms'; import React, {Compo

ReactNative: 使用Text文本组件

一.简言 初学RN,一切皆新.Text组件主要用于显示文本,Text组件的重要性不言而喻,无论是Web开发还是客户端开发,都离不开它.它具有响应特性,也即表现为当它被触摸时是否显示为高亮状态.在Web开发中,字体样式的继承十分重要,在body上设置字体可以作用到全部的文本标签,而RN中字体样式只有在Text组件上才起作用.它支持多层嵌套,由此它存在样式继承,内部的Text组件可以继承外部Text组件的样式,也即父组件定义了相关样式,如果子组件没有重写样式的话,那么该子组件也会继承父组件定义的样式

ReactNative: 使用图片裁剪组件ImageEditor组件

一.简介 图片在应用中的使用非常常见,绚丽的图片能使App增色不少.当设计师给开发者一张图片后,有时根据情况需要用到该图片中的某一部分,当然研发可以让设计师再设计一张,其实,还有其他的办法可以实现,例如绘制指定局域的图片.裁剪图片等.在ReactNative中,提供了图片裁剪组件ImageEditor,这个组件可以将一张图片进行任意的裁剪,获取需要的那一部分.ImageEditor组件的API相当简单,仅仅提供了一个静态方法,下面就来研究一下. 二.API 提供的裁剪图片的静态方法如下: //u

【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html 本篇Himi来利用ListView和TextInput这两种组件实现对话.聊天框. 首先需要准备的有几点:(组件的学习就不赘述了,简单且官方有文档) 1. 学习下 ListView: 官方示例:http://reactnative.cn/docs/0.27/tutorial.html#content

React-Native组件之Text内文字垂直居中方案

1 style: { 2 height: 100, 3 textAlign: 'center', 4 textAlignVertical: 'center', 5 } 以上方法在Android上显示水平垂直居中, 但在IOS上只能水平居中, 方法是在IOS上添加lineHeight: 100, 如下 1 style: { 2 height: 100, 3 textAlign: 'center', 4 textAlignVertical: 'center', 5 ...Platform.selec

ReactNative: 使用View组件创建九宫格

一.简言 初学RN,一切皆新.现在使用最基本的组件View容器组件,创建一个九宫格.这里会通过给组件设置伸缩性布局完成布局样式.代码如下: /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ //导入React和React-Native框架的系统组件 import React, { Component } from 'react'; import { AppRegistry, St

1. ReactNative 基础

/** 1. reactNative  反应式语言 2. 既拥有原生的用户体验,又保留React的开发效率 3. FaceBook研究 H5,Android,iOS 4. BAT的插件化,热修改  2015/9/15 主流React Native 技术比较有效 Android版本稳定更加火爆 可以使用javaScript和React跨平台开发 learn once,write everywhere(最具有魅力) Web/iOS/Android ->Virtual DOM -> React(JS