技术控

    今日:56| 主题:49101
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 基础篇章:React Native 之 TextInput 的讲解

[复制链接]
无心碍人 发表于 2016-10-4 01:00:02
418 6

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
今天我们讲解的是React Native基础系列之TextInput的讲解,如果想学习更多的开发知识或者移动开发文章,欢迎大家关注我的微信公众号:非著名程序员(smart_android)。
  TextInput 是一个允许用户输入文本的基础组件。它有一个onChangeText的属性,该属性接受一个函数,每当文本输入发生变化时,此函数就会被调用。它还有一个onSubmitEditing的属性,当文本输入完被提交的时候调用。
  官网例子

         [code]import React, { Component } from 'react';import { AppRegistry, Text, TextInput, View } from 'react-native';class PizzaTranslator extends Component {  constructor(props) {        super(props);        this.state = {text: ''};  }  render() {        return (                          this.setState({text})}                />                                  {this.state.text.split(' ').map((word) => word && ':pizza:').join(' ')}                                  );  }}AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);[/code]          效果图如下:
   
基础篇章:React Native 之 TextInput 的讲解-1 (textinputlayout,textinput,textinput,事件)
    这个例子实现的功能就是当我们在文本输入框里输入一个单词时,该单词就会换成:pizza:,如果输入的是一句话或者很多单词,就会实时动态的把一句话拆成以一个一个的单词,然后替换成:pizza:。比如:”Hello there Bob”将会被翻译为”:pizza::pizza::pizza:”。
  解释

  如果你们不懂js的话,可能看着有点困难,所以学React Native的时候,大家最好先去看看js,至少得懂一些。
  
       
  • 逻辑与 aa && bb 这里的意思是逻辑与的操作,如果逻辑与是true,则返回前面的aa,如果是false,则返回bb。这回懂了 word && ‘:pizza:’ 这个的意思了吧?   
  • [].map() 基本用法跟forEach方法类似,循环遍历数组,然后返回新的数组   
  • join() arrayObject.join(separator),返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的。  
  再说一遍,以后就不解释了,不懂js语法的自行去学习。
  属性方法

  
       
  • autoCapitalize: 控制输入框输入时字符的大写,参数有:’none’, ‘sentences’, ‘words’, ‘characters’。
           
    • none:不自动切换任何字符成大写     
    • sentences:默认句话的首字母变成大写     
    • words:每个单词的首字母变成大写     
    • characters:每个字母全部变成大写   
       
  • placeholder:占位符,默认显示信息,在输入前显示的文本内容。相当于android中的hint,当有输入的内容时被清除。   
  • placeholdertTextColor: 占位符文本颜色。   
  • value: 文本输入框的默认值。   
  • password: 如果为true ,则是密码输入框,文本显示为***。   
  • multiline: 如果为true , 则是多行输入。   
  • editable: 如果为false , 文本框不可输入。其默认值事true。   
  • autoFocus: 如果为true, 将自动聚焦。   
  • clearButtonMode : 枚举类型,可选值有never,while-enditing , unless-editing,always。用于显示清除按钮。   
  • maxLength: 输入文本框能够输入的最长字符数。   
  • keyboardType:输入框的键盘类型(可选参数:”default”, ‘email-address’, ‘numeric’, ‘phone-pad’, “ascii-capable”, ‘numbers-and-punctuation’, ‘url’, ‘number-pad’, ‘name-phone-pad’, ‘decimal-pad’, ‘twitter’, ‘web-search’) 该功能用来选择默认弹出键盘的类型例如我们甚至numeric就是弹出数字键盘。   
  • onChangeText: 当文本输入框的内容发生变化时,调用该函数。onChangeText接收一个文本的参数对象。   
  • onChange: 当文本变化时,调用该函数。   
  • onEndEditing: 当结束编辑时,调用该函数。   
  • onBlur: 失去焦点触发事件,回调该函数。   
  • onFocus: 获得焦点触发该监听事件。   
  • onSubmitEditing: 当结束编辑后,点击键盘的提交按钮出发该事件。但是当multiline={true}的时候,该属性就会失效。   
  • secureTextEntry:设置是否为密码安全输入框 ,默认为false。   
  • textAlign:设置文本横向布局方式 可选参数(‘start’, ‘center’, ‘end’)   
  • textAlignVertical:设置文本垂直方向布局方式 可选参数(‘top’, ‘center’, ‘bottom’)   
  • underlineColorAndroid:设置文本输入框下划线的颜色   
  • autoCorrect:设置拼写自动修正功能 默认为开启(true)   
  • onLayout:当组件布局发生变化的时候调用   
  • numberOfLines:number设置文本输入框行数,使用该功能需要先设置multiline为true,设置TextInput为多行文本。  
  TextInput实践

  效果图

     废话不多说,结合我们之前学的一些基础,再加上TextInput的知识,我们现在练习一个demo,巩固一下以前的知识点。效果图如下:

基础篇章:React Native 之 TextInput 的讲解-2 (textinputlayout,textinput,textinput,事件)
    demo代码

         [code]import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  TextInput} from 'react-native';class TextInputDemo extends Component {  render() {        return (                                                                                                邮箱登录                                                                                                                                                                                                     注册                                                                                                                                                               登录                                                                                                               忘了密码?点此找回                                                                                    );  }}const styles = StyleSheet.create({  container: {        flex: 1,        backgroundColor: 'white',  },  title_view:{        flexDirection:'row',        height:50,        alignItems: 'center',        backgroundColor:'#27b5ee',  },  title_text:{        color:'white',        fontSize:22,        marginLeft:20,        textAlign:'center'  },  top_half_view:{        flex: 1.3,        backgroundColor: 'white',  },  bottom_half_view:{        flex: 1,        backgroundColor: '#eeeeee',  },  textinput: {        backgroundColor:'#fff',        marginTop:5,        marginLeft:20,        marginRight:20,        textAlign:'left',  },  style_view_login:{            flex:1,          marginTop:20,          marginLeft:20,          marginRight:20,          backgroundColor:'#27b5ee',          height:35,          borderRadius:5,          justifyContent: 'center',          alignItems: 'center',  },  style_view_register:{            flex:1,          marginTop:20,          marginLeft:20,          marginRight:20,          borderColor:'#5ac4ef',          borderWidth: 1,          height:35,          borderRadius:5,          justifyContent: 'center',          alignItems: 'center',  },  bottom_text:{        color:'#27b5ee',        fontSize:14,        marginTop:10,        marginLeft:20,        textAlign:'left',        fontWeight:'bold'  },});AppRegistry.registerComponent('TextInputDemo', () => TextInputDemo);[/code]       到这里关于TextInput的知识点我们就讲的差不多了,希望大家亲自实践去实现一下上面的例子,肯定会收获很多,想学更多开发知识,欢迎大家关注微信公众号:非著名程序员(smart_android)。
友荐云推荐




上一篇:[ Laravel 5.3 文档 ] 数据库 —— 迁移
下一篇:Does Angular 2 live up to the hype?
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

范德萨 发表于 2016-10-4 03:52:06
楼主你好。。新人。混眼熟。顺便骗点经验。到手~拍拍屁股走人~
回复 支持 反对

使用道具 举报

祈祈 发表于 2016-10-5 00:49:43
支持支持再支持
回复 支持 反对

使用道具 举报

bleso 发表于 2016-10-5 02:22:11
逼格很高,回帖很快
回复 支持 反对

使用道具 举报

skylinehbu 发表于 2016-11-9 17:24:17
不想当厨子的裁缝,不是好司机.
回复 支持 反对

使用道具 举报

黄伯建 发表于 2016-11-10 15:56:46
现在的男人们,白天是非诚勿扰,晚上让子弹飞,结果就有了很多肇事孤儿
回复 支持 反对

使用道具 举报

杀手会面对 发表于 2016-11-13 17:40:42
向楼主学习
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表