处理文本输入

PizzaTranslator.js

/**
 * Created by zhoujian on 2019/4/9.
 */
import React, {Component} from 'react';
import {AppRegistry, Text, TextInput, View} from 'react-native';


export default class PizzaTranslator 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>
        );
    }
}

 

index.js

import {AppRegistry} from 'react-native';
import PizzaTranslator from './js/PizzaTranslator';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => PizzaTranslator);