React Native-08：输入组件-TextInput

import React, { Component } from 'react'
import
{
    Text, View,
    TextInput,  // input 表单组件
    TouchableOpacity,  // 手指触摸透明度变化。用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低。不透明度的变化是通过把子元素封装在一个Animated.View中来实现的，这个动画视图会被添加到视图层级中，少数情况下有可能会影响到布局。（译注：此组件与 TouchableHighlight 的区别在于并没有额外的颜色变化，更适于一般场景。）

    StyleSheet
} from 'react-native'

export default class App extends Component
{
    state = {
        email: '',
        password: '',
        intro: ''
    }
    handleEmail = (text) =>
    {
        this.setState({ email: text })
    }
    handlePassWord = (text) =>
    {
        this.setState({ password: text })
    }
    handleIntro = (text) =>
    {
        this.setState({ intro: text })
    }
    register = (email, password, intro) =>
    {
        alert('email:' + email + '\npassword:' + password + '\nintro:' + intro)
    }
    render ()
    {
        return (
            <View style={styles.container}>
                <TextInput style={styles.input}
                    underlineColorAndroid="transparent"  // 下划线的颜色 透明 
                    placeholder="请输入邮箱"  // 占位符
                    placeholderTextColor="pink"  // 占位符颜色
                    autoCapitalize="none"  // 字母大写模式:'none','sentences',''words','characters'
                    keyboardType="email-address"  // 键盘类型 可选的值有 "default","number-pad","decimal-pad","numeric","email-address","phone-pad"
                    returnKeyType="next"  // 键盘上的返回键类型 可选的值有 "done","go","next","search","send"
                    onChangeText={this.handleEmail}  // 文本变更后的回调函数 参数为输入框里的文本
                />
                <TextInput style={styles.input}
                    underlineColorAndroid="transparent"
                    placeholder="请输入密码"
                    placeholderTextColor="pink"
                    autoCapitalize="none"
                    returnKeyType="next"
                    secureTextEntry={true}  // 是否属于密码框类型
                    onChangeText={this.handlePassWord}
                />
                <TouchableOpacity />
                <TextInput style={[styles.input, { height: 100 }]}
                    underlineColorAndroid="transparent"
                    placeholder="请输入描述"
                    placeholderTextColor="pink"
                    autoCapitalize="none"
                    multiline={true}  // 多行设置
                    numberOfLines={4}  // 行数
                    textAlignVertical="top"  // 文字的位置靠上
                    returnKeyType="done"
                    onChangeText={this.handleIntro}  // 文本变更后的回调函数 参数为输入框里的文本
                />
                {/* 封装视图 使其可以正确响应触摸操作 */}
                <TouchableOpacity
                    style={styles.submitButton}
                    onPress={() => this.register(this.state.email, this.state.password, this.state.intro)}
                >
                    <Text style={styles.submitButtonText}>注册</Text>
                </TouchableOpacity>

            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        paddingTop: 23
    },
    input: {
        margin: 15,
        paddingLeft: 8,
        height: 40,
        borderColor: 'pink',
        borderWidth: 1
    },
    submitButton: {
        backgroundColor: 'pink',
        padding: 10,
        alignItems: 'center',
        margin: 15,
        height: 40,
    },
    submitButtonText: {
        color: 'white'
    }
})