ReactNative从零到完整项目-处理文本输入

项目连接: 93Laer/MyDemo
ReactNative使用手册

这里基本参照官方,假如我们要实现当用户输入时,实时将其以单词为单位翻译为另一种文字。我们假设这另一种文字来自某个吃货星球,只有一个单词:。所以"Hello there Bob"将会被翻译为"**"。
代码:

/**
 * 创建人:赖天兵
 * 时间: 2018/2/22
 * :https://www.jianshu.com/u/2229fd214880
 * 掘金:https://juejin.im/user/58647e21128fe1006d0f3f3e
 * github:https://github.com/93Laer
 * 描述:
 */
import React,{Component} from 'react';
import {
    Text,
    TextInput,
    View} from 'react-native';
export default class TextInputTest extends Component{
    constructor(props) {
        super(props);
        this.state = {text: ''};
    }
    render(){
        return 
             this.setState({text})}
                />
            
                {this.state.text.split(' ').map((word) => word && '*').join(' ')}
            
        
    }
}

效果图

文本输入.gif

喜欢请点赞,或是关注,后续将完善发布更多的文章,你的鼓励就是我的动力(程序员最大的动力莫过于同行的鼓励)

你可能感兴趣的:(ReactNative从零到完整项目-处理文本输入)