React Native之TextInput

---

TextInput是一个允许用户输入文本的基础控件，属性onChangeText对应的函数会在文本变化时被调用，属性onSubmitEditing对应的函数会在文本被提交后（用户按下软键盘上的提交键）调用。
示例代码：

import React, {Component} from 'react'

import {
    StyleSheet,
    View,
    TextInput,
    Text
} from 'react-native'

export default class PizzaTranslator extends Component {
    static navigationOptions = {
        // title: 'page 1',
        title: 'TextInput',
    };
    constructor(props){
        super(props);
        this.state = {text:''};
    }

    render() {
        return (
            
                 this.setState({text})}/>
                
                    {this.state.text.split(' ').map((word) => word && '').join(' ')}
                
            
        );
    }
}

效果图：

image.png

示例代码2：

import React, {Component} from 'react'

import {
    StyleSheet,
    View,
    TextInput,
    Text
} from 'react-native'

class UselessTextInput extends Component {

    constructor(props){
        super(props);
        this.state = {text:'Useless Placeholder'};
    }

    render() {
        // noinspection JSAnnotator
        return (
            
        );
    }
}

export default class UselessTextInputMultiline extends Component{
    static navigationOptions = {
        title: 'TextInput',
    };
    constructor(props){
        super(props);
        this.state = {
            text:'Useless Multiline Placeholder',
        };
    }

    render() {
        return (
            
                 this.setState({text})}
                    value={this.state.text}
                />
            
        );
    }
}

注：{...this.props} 表示将父组件传递来的所有props传递给TextInput,比如上面例子中的multiline和numberOfLines。padding:0和underlineColorAndroid="transparent"用来去除TextInput默认的底边框。textAlignVertical:'top'设置内容居顶显示。

效果图：