混合开发的大趋势之一React Native TextInput (文本输入)

前端之家收集整理的这篇文章主要介绍了混合开发的大趋势之一React Native TextInput (文本输入)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

转载请注明出处:王亟亟的大牛之路

昨天发了个力发了3篇RN的,今天继续学习,终于有新的组件进入我们的视野,这一篇是“输入框”TextInput

继续安利,每天都在更新:https://github.com/ddwhan0123/Useful-Open-Source-Android


TextInput

TextInput是允许用户输入文本的基础组件。
他有一些属性可以来帮助我们处理业务逻辑诸如onChangeText onSubmitEditing 等等

类似于Android 的EditText,而那些提供的处理方法类似于ontextchanged等回调的行为。

我们来看下官方的例子

import React,{ Component } from 'react';
import { AppRegistry,Text,View,TextInput } from 'react-native';
class RNLearnPro extends Component {
constructor(props){
  super(props);
  this.state={text:'' };
}

  render() {
    return(
    <View style={{padding :10}}>
      <TextInput
        style={{height : 40}}
        placeholder="输入内容"
        onChangeText={(text)=> this.setState({text})}/>
      <Text style={{padding :10,fontSize:30}}>
        {this.state.text.split('').map((word)=>word&&'哈').join(' ')} </Text> </View> ); } } AppRegistry.registerComponent('RNLearnPro',() => RNLearnPro); 

我们有一个试图组,垂直排列,上面是TextInput 下面是 Text 业务逻辑是 TextInput 输入一个 字 在 Text 就会显示一个 “哈”然后会填充进去一个空格

实现还是通过 state来操作的 <Text/> 通过监听 state的变化来决定自己的呈现内容,<TextInput/> 通过onChangeText 来改变state 的值

注:
如果要对TextInput进行UI渲染,诸如下划线啊,外部框体啊什么的,可以选择再外面再套个View,然后对那个View进行UI行为,如下图

核心代码

 <View style={{ borderBottomColor: '#000000',borderBottomWidth: 1,width: 100}}> <TextInput  style={{height : 40,width: 100}} placeholder="输入内容" onChangeText={(text)=> this.setState({text})}/> </View>

再来介绍些 <Text/> 的API

autoCapitalize

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

1.characters–> 所有的字符。

2.words–> 每个单词的第一个字符。

3.sentences:–>每句话的第一个字符(默认)。

4.none:–>不自动切换任何字符为大写。

看下characters的例子

autoCorrect

拼写自动修正,默认是true

autoFocus

获得焦点,默认值为false。

blurOnSubmit

如果为true,文本框会在提交的时候失焦。
单行输入框默认值为true,多行则为false。

对于多行输入框来说,如果将blurOnSubmit设为true,则在按下回车键时就会失去焦点同时触发onSubmitEditing事件,而不会换行。

defaultValue

设置初始值,如果擦掉就会显示placeholder值

editable

文本框是否可编辑的,默认为true

更多内容可查看原文 :https://facebook.github.io/react-native/docs/textinput.html

这里推荐2个atom的插件 方便我们开发

一个是代码提醒的:https://atom.io/packages/atom-react-native-autocomplete

一个是CSS的:https://atom.io/packages/atom-react-native-css

对了,最重要的一句话,周末愉快!!!

原文链接:https://www.f2er.com/react/306189.html

猜你在找的React相关文章