React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)

TextInput组件介绍

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等。最简单的用法就是丢一个TextInput到应用里,然后订阅它的onChangeText事件来读取用户的输入。

组件的常用属性

(1)autoCapitalize:控制TextInput是否要自动将特定字符切换为大写。可选值有:none、sentences、words、characters。
  • characters: 所有的字符。
  • words: 每个单词的第一个字符。
  • sentences: 每句话的第一个字符(默认)。
  • none: 不自动切换任何字符为大写。
(2)placeholder:占位符,在输入前显示的文本内容。
(3)value:文本输入框的默认值。
(4)placeholderTextColor:占位符文本的颜色。
(5)secureTextEntry:如果为 true,表示密码输入框。文本显示为“*”,默认值为false。
(6)multiline:如果为 true,表示多行输入。
(7)editable:默认为 true。如果设置为 false 表示不可编辑。
(8)autoFocus:如果为 true,则自动获取焦点。
(9)clearButtonMode:表示什么时候会显示清除按钮。可选值有:never、while-editing、unless-editing、always。
(10)maxLength:能够输入的最长字符数。
(11)enablesReturnKeyAutomatically:默认为 false。设置为 true 表示没有输入文本时返回键无法使用。
(12)returnKeyType:表示软键盘返回键显示的字符串。可选值为:default、go、google、join、next、route、search、send、yahoo、done、emergency-call。
(13)secureTextEntry:默认为 false。如果为 true,则像密码框一样隐藏输入内容。
(14)autoCorrect:如果为false,会关闭拼写自动修正。默认值是true。
(15)blurOnSubmit:如果为true,文本框会在提交的时候失焦。对于单行输入框默认值为true,多行则为false。注意:对于多行输入框来说,如果将blurOnSubmit设为true,则在按下回车键时就会失去焦点同时触发onSubmitEditing事件,而不会换行。
(16)caretHidden:如果为true,则隐藏光标。默认值为false。
(17)keyboardType:keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') ,决定弹出的何种软键盘的,譬如numeric(纯数字键盘)。

这些值在所有平台都可用:

  • default
  • numeric
  • email-address
  • phone-pad

(18)iosreturnKeyType:iosreturnKeyType enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') 决定“确定”按钮显示的内容。在Android上你还可以使用returnKeyLabel来自定义文本。

跨平台

下列这些选项是跨平台可用的:

  • done
  • go
  • next
  • search
  • send

限Android

下列这些选项仅限Android使用:

  • none
  • previous

限iOS

下列这些选项仅限iOS使用:

  • default
  • emergency-call
  • google
  • join
  • route
  • yahoo

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

(20)selection:selection {start: number, end: number} 设置选中文字的范围(指定首尾的索引值)。如果首尾为同一索引位置,则相当于指定光标的位置。

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

组件的常用方法

(1)onChange:当文本发生变化时,调用该函数。
(2)onEndEditing:当结束编辑时,调用该函数。
(3)onBlur:失去焦点时触发。
(4)onFocus:获得焦点时触发。
(5)onSubmitEditing:当结束编辑后,点击键盘的提交按钮触发该事件。
(6)onChangeText:当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。
(7)onLayout:当组件挂载或者布局变化的时候调用,参数为{x, y, width, height}
(8)onScroll:在内容滚动时持续调用,传回参数的格式形如{ nativeEvent: { contentOffset: { x, y } } }。 也可能包含其他和滚动事件相关的参数,但是在Android上,出于性能考虑,不会提供contentSize参数。
(9)onSelectionChange:长按选择文本时,选择范围变化时调用此函数,传回参数的格式形如 { nativeEvent: { selection: { start, end } } }
(10)iosonKeyPress:当一个键被按下的时候调用此回调。传递给回调函数的参数为{ nativeEvent: { key: keyValue } },其中keyValue即为被按下的键。会在onChange之前调用。

组件的使用实例

1,文本加输入框(封装组件 iOS Android)

封装组件InputView.js的使用实例,如有需要完整的代码,请留言评论

                     <View >
<Text>请认真填写资料</Text>
<View style={{ marginTop: 12 }}>
<InputView name={'账号'}
hintText={''}
editableV={false}
value={String(this.state.telephone)}
/>
<InputView name={'支付密码'}
isPassword={true}
hintText={'请输入数字+字母的组合'}
onChangeText={(inputData) => { this.setState({ password: inputData }) }}
/>
<InputView name={'再次确认'}
isPassword={true}
//value={this.state.nickname}
hintText={'请再次输入'}
onChangeText={(inputData) => { this.setState({ confirmPass: inputData }) }}
/> </View>
</View>

2,富文本编辑(封装组件 iOS Android)

富文本RichTextView的使用实例,如有需要完整的代码,请留言评论

             <View style={{ marginTop: 20 }}>
<Text
style={{
fontSize: 14,
color: AppSetting.BLACK,
paddingLeft: 20,
marginBottom: 10
}}>奖品描述</Text>
<RichTextView
inputStyle={styles.inputStyle}
placeholder="请填写奖品描述(1000字以内哦)"
minHeight={240} // 最小高度,默认为100
maxLength={1000} // 最大长度,默认为100
onChangeText={(inputValue) => {
let desPrizes = CommonMethod.filteremoji(inputValue, 1)//表情过滤机制
this.setState({ desPrizes: desPrizes })
}}
showCount={true} // 展示剩余文字, 默认为true
/> </View>

RichTextView.js富文本编辑组件

 /**
* Created by jackson on 2018/08/13.
* 富文本
*/
import React, {Component} from 'react';
import PropTypes from 'prop-types'
import {
StyleSheet,
View,
TextInput,
Text,
Dimensions
} from 'react-native';
const ScreenHeight = Dimensions.get('window').height;
const ScreenWidth = Dimensions.get('window').width;
const defaultMinHeight = 100
//模块声名并导出
export default class RichTextView extends Component {
//属性声名
static propTypes = {
style:PropTypes.object,
inputStyle:PropTypes.any,
maxLength:PropTypes.number, // 限制文字长度
placeholder:PropTypes.string, // 占位文字
minHeight:PropTypes.number, // 最小高度
showCount:PropTypes.bool,
onChangeText:PropTypes.func,//获取编辑的文本
}; //默认属性
static defaultProps = {
maxLength: 100,
showCount: true,
minHeight: defaultMinHeight
}; //构造函数
constructor(props) {
super(props);
//状态机变量声明
this.state = {
text: '',
};
} //渲染
render() {
return (
<View style={styles.container}>
<View style={[styles.inputViewStyle,this.props.style,{minHeight:this.props.minHeight}]}>
<TextInput
style={[styles.inputTextStyle,this.props.inputStyle,{minHeight:this.props.minHeight}]}
placeholder={this.props.placeholder ? this.props.placeholder :'请输入'}
multiline={true}
paddingVertical={0}
selectionColor = {'#b2b2b2'}
textAlignVertical={'top'}
placeholderTextColor={'#b2b2b2'}
underlineColorAndroid={'transparent'}
maxLength={this.props.maxLength}
defaultValue = {this.state.text}
onChangeText={
(text) => {
this.props.onChangeText(text)
this.setState({
text: text
})
}
}
/>
{
this.props.showCount ?
<Text style={{position: 'absolute', bottom: 5, right: 10, fontSize: 14}}>
{this.state.text.length}/{this.props.maxLength}
</Text>
:
null
}
</View>
</View>
);
}
}; const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
inputViewStyle: {
width:ScreenWidth - 40,
minHeight: defaultMinHeight,
},
inputTextStyle: {
fontSize: 14,
color: '#666666',
width: '100%',
minHeight: defaultMinHeight,
padding: 10,
paddingBottom: 30,
paddingTop: 10
}
});

React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)的更多相关文章

  1. React Native之FlatList的介绍与使用实例

    React Native之FlatList的介绍与使用实例 功能简介 FlatList高性能的简单列表组件,支持下面这些常用的功能: 完全跨平台. 支持水平布局模式. 行组件显示或隐藏时可配置回调事件 ...

  2. React Native 之 TextInput使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  3. React Native(十)——TextInput一点小结

    11.24(后续的道路会更加漫长,一点一点总结上去吧~): 从昨天开始接触Mac,实在让自己有点“奔溃”的赶脚……老大说,“不要紧,多接触接触就好了.” 于是,我就开始了跟Mac死磕到底的准备……就先 ...

  4. React Native之微信分享(iOS Android)

    React Native之微信分享(iOS Android) 在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋 ...

  5. React Native控件只TextInput

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

  6. React Native 之生命周期

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  7. React Native 混合开发与实现

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 随着 React 的盛行,其移动开发框架 React Native 也收到了广大开发者的青睐,以下简 ...

  8. 从零学React Native之10Text

    在React Native开发中,所有需要显示的字符串文本都需要放置在Text或者Text的子组件中.虽然在之前的文章中多次使用了Text组件,但是Text组件还是值得专门学习的, 并没有想象中的那么 ...

  9. 从零学React Native之06flexbox布局

    前面我们接触了好多React Native代码, 并没有介绍RN中的组件具体是如何布局的,这一篇文章,重点介绍下flexbox布局. 什么是flexbox布局 React中引入了flexbox概念,f ...

随机推荐

  1. 暴力枚举 + 24点 --- hnu : Cracking the Safe

    Cracking the Safe Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit u ...

  2. Maven基础使用

    常用命令 mvn clean:清除maven的编译结果 mvn compile:编译 mvn package:编译.打包 mvn install:编译.打包.部署 –DskipTests:编译测试用例 ...

  3. BZOJ3246 [Ioi2013]Dreaming

    Description Serpent(水 蛇)生活的地方有N个水坑,编号为0,...,N - 1,有M条双向小路连接这些水坑.每两个水坑之间至多有一条路径(路径包含一条或多条小路)相互连接,有些水坑 ...

  4. K-集合 (JXNU第二次周赛1006)set/平衡树

    K-集合 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Submissi ...

  5. 关于DJANGO和JAVASCRIPT的时间

    最近,实际一些简单统计时,要到库里去检索数据出来用HIGHCHARTS画图, 作一个简单的回照.. DJANGO用TEMPLATEVIEW来作.专业,正规:) class SAView(Templat ...

  6. ViewPager的用法

    ViewPager 1.布局文件中的配置 ViewPager的路径 方法:在源码文件中输入ViewPager,按下alt+/,上面就会出来viewPager的包路径 viewPager的配置很简单,前 ...

  7. data矩阵poj 2778 DNA Sequence

    最近研究data矩阵,稍微总结一下,以后继续补充: ac自动机处理字符串,dp计算谜底,用矩阵来减速     每日一道理 巴尔扎克说过“不幸,是天才的进升阶梯,信徒的洗礼之水,弱者的无底深渊”.风雨过 ...

  8. POJ 3264 RMQ裸题

    POJ 3264 题意:n个数,问a[i]与a[j]间最大值与最小值之差. 总结:看了博客,记下了模板,但有些地方还是不太理解. #include<iostream> #include&l ...

  9. PHP学习笔记之数组篇

    摘要:其实PHP中的数组和JavaScript中的数组很相似,就是一系列键值对的集合.... 转载请注明来源:PHP学习笔记之数组篇   一.如何定义数组:在PHP中创建数组主要有两种方式,下面就让我 ...

  10. UVa1587 盒子

    前言 第一次刷题,ac的感觉真的很棒! 题目 题目 大意是说,输入6个面,判断是否是个长方体. 思路 根据长方体的特质来判断,比如说6个面中3个面是相互对应的,只有3条不同的边等等. 我就知道我肯定会 ...