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 <View style={{padding: 10}}>
            <TextInput
                style={{height: 40}}
                placeholder="Type here to translate!"
                onChangeText={(text) => this.setState({text})}
                />
            <Text style={{padding: 10, fontSize: 42}}>
                {this.state.text.split(' ').map((word) => word && '*').join(' ')}
            </Text>
        </View>
    }
}

效果图

文本输入.gif
喜欢请点赞，或是关注，后续将完善发布更多的文章，你的鼓励就是我的动力（程序员最大的动力莫过于同行的鼓励）