ReactNative TextInput 组件

ReactNative TextInput 组件。

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TextInput,
    Image,
} from 'react-native';

/**7、TextInput  组件
 * 是一个允许用户在应用中通过键盘输入文本的基本组件
 * 本组件的属性提供了多种特喜感的配置，譬如 自动完成，自动大小写，站位文字
 * 以及多种不同的键盘类型（如纯数字键盘）等等
 * 常用：
 * placeholder:占位符
 * value 输入框的值
 * password 是否密文输入
 * editable 是否可编辑
 * returnKeyType 键盘return键类型
 * onChangeText 当文本变化时调用
 * onEndEditing 当结束编辑室调用
 * onSubmitEditing 当结束编辑，点击提交按钮时调用
 * ...
 *
 */
let RnDemo = React.createClass({
    //设置属性默认值
    getInitialState: function () {
        return {
            inputText: ""
        };
    },
    //输入框的onChange的实现
    getContent: function (text) {
        this.setState({
            inputText: text
        });
    }
    ,
    clickBtn: function () {
        alert(this.state.inputText);
    },
    render: function () {
        return (
            <View style={styles.container}>
                <View style={styles.flex}>
                    <TextInput
                        style={styles.input}
                        returnKeyType="search"
                        placeholder="请输入内容"
                        onChangeText={this.getContent}
                    />
                </View>
                <TouchableOpacity style={styles.button} onPress={this.clickBtn}>
                    <Text style={styles.search}>搜索</Text>
                </TouchableOpacity>
            </View>
        );
    }
});
let styles = StyleSheet.create({
        container: {
            flexDirection: "row",
            height: 45,
            marginTop: 25,
        },
        flex: {
            flex: 1
        },
        input: {
            height: 45,
            borderWidth: 1,
            marginLeft: 5,
            paddingLeft: 5,
            borderColor: "#CCC",
            borderRadius: 4,
        },
        button: {
            width: 55,
            height: 45,
            marginLeft: 5,
            marginRight: 5,
            backgroundColor: "#23BEFF",
            justifyContent: "center",
            alignItems: "center",
        },
        search: {
            color: "#FFF",
            fontSize: 15,
            fontWeight: 'bold'
        },
    }
);