RN，TextInput初步接触解析 2018年4月25

这只是笔记

React-Native 之 TextInput使用（简书以为大神写的）
https://www.jianshu.com/p/2f702b52b321

刚接触RN没几天，感觉好累的。今天准备些一个登陆页面，结果我发现TextInput 的 password={true} 根本不能设置成密码框，然后去看源码，发现了 secureTextEntry这个属性字段

<TextInput
    placeholder="请输入密码" //相当于hint
    placeholderTextColor='#00000033' //相当于textColorHint
    underlineColorAndroid='transparent' // 下划线  透明
    maxLength={12}  //输入字符的最大长度
    // password={true} //完全没用
    secureTextEntry={true} //是否是安全文本，达到密码框的效果，网上都是 password={true} 这个示例。
// 首字母自动大写。none 不自动大写；sentences 
//每句话首字母大写；words 每个单词首字母大写；characters 每个英文字母都大写   
 autoCapitalize='none' 
    //一般就用前面个值，或者说都用第一个值。  默认值是 sentences 
    style={
        {
           color: '#000000',
           flex: 1,
           fontSize: 15,
           padding: 0,
           left: 10,
         }
} />



const myStyle = StyleSheet.create({

    bgViewStyle: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'flex-end',
        position: 'relative',
        alignContent: 'center',
    },

    myImageStyle_1: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
    },

    myInputParent: {
        flexDirection: 'row',
        width: '70%',
        backgroundColor: '#acacac44',
        borderColor: '#acacac99',//边框颜色
        borderWidth: 1, //边框线条的粗细
        borderRadius: 8, //边框的弧度
        alignItems: 'center',
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 10,
        paddingRight: 10,
        marginTop: 10,
    },



});

然后我接着写代码了，写到登录逻辑的时候，我怎么拿到 用户名 和 密码 去登录呢。一下蒙了，这么可没有安卓里的private EditText mUsername 之类的，然后findViewById 拿到这个控件，怎么办呢。？
每个组件都有state对象，关键就看这个了。下面是我的代码，有的地方省略了。

export default class LoginActivity extends React.Component {

    constructor(props) {
        super(props);
        //定义state对象下有两个字段，分别有默认值（这个不要解释了吧）
        this.state = {userName : 'default_name',passWord : 'default_pwd'}

        //this.userName = this.updateName.bind(this);
    }


    //定义一个函数，作为用户名改变的回调。这个回调在构造器constructor里进行绑定，在那里我先注释掉
    updateName(name){
        this.setState((state) => {
            return {
                userName : name
            }
        });
    }

    //下面关于一些样式啊，TextInput的属性就不说了，最主要说获取里面的值

    render() {
        return (
            <View style={myStyle.bgViewStyle} >
                <ImageBackground style={myStyle.myImageStyle_1}
                    source={require('./image/bg_login.png')}>
                    <Text style={{ fontSize: 95, color: 'white', letterSpacing: 1, fontStyle: 'italic', fontWeight: 'bold', padding: 0 }}>SRC</Text>

                    <View style={myStyle.myInputParent}>
                        <Image source={require('./image/icon_phone.png')} style={{ width: 20, height: 20 }} />
                        <View style={{ width: 1, height: 25, justifyContent: 'center', backgroundColor: 'white', left: 5 }} />
                        <TextInput
                            placeholder={'请输入用户名'}
                            placeholderTextColor='#999999'
                            underlineColorAndroid='transparent'
                            maxLength={12}
                            //给输入框添加一个输入监听， 下面的小括号和中括号保持一致，并请是你要改变
                            //state 中 属性的那个值，要不然不是奔溃就是value回填的时候把你输入的信息
                            //覆盖掉，自己可以去尝试一下，密码框那边就不解释了，同样的道理
                            onChangeText={(userName) => this.setState({userName})}

                            //利用回调函数去记录用户输入的用户名，和上面直接理由setState差不多。
                            //onChangeText={(userName) => this.updateName(userName)}
                            value={this.state.userName}
                            style={
                                {
                                    //样式省略,上面那段代码有....................
                                }
                            } />
                    </View>

                    <View style={myStyle.myInputParent}>
                        <Image source={require('./image/icon_key.png')} style={{ width: 20, height: 20 }} />
                        <View style={{ width: 1, height: 25, justifyContent: 'center', backgroundColor: 'white', left: 5 }} />
                        <TextInput
                            placeholder="请输入密码"
                            // password={true}
                            secureTextEntry={true}
                            autoCapitalize='none'
                            onChangeText={(passWord) => this.setState({passWord})}
                            value={this.state.passWord}
                            style={
                                {
                                    //样式省略,上面那段代码有....................
                                }
                            } />
                    </View>

                    //***state 是属于 LoginActivity 组件的，loginMethod函数是数据这个JS文件的***，
                    //所以把整个state当做参数给过去，loginMethod中想怎么处理就是函数的事情了。
                    <Text onPress={() => loginMethod(this.state)}
                        style={{
                            width: '100%',
                            color: 'white',
                            width: '70%',
                            fontSize: 15,
                            backgroundColor: "#FF6464",
                            borderRadius: 8,
                            marginTop: 15,
                            padding: 10,
                            textAlign: 'center',
                        }}>登录</Text>
                </ImageBackground>
            </View>


        )
    };
}


//这下面的代码不解释，再解释就暴露自己智商了。
function loginMethod(state) {
    Alert.alert('登录提示', '请确认账号和密码', [
        { text: '取消', onPress: () => userCanceled() },
        { text: '确定', onPress:  () => userConfirmed(state.userName,state.passWord) }
    ],
        { cancelable: true });
}

function userConfirmed(userName,passWord) {
    ToastAndroid.show("用户名："+userName + "\t 密码：" + passWord,2*1000);
}

function userCanceled() {

}

暂时只有到这些属性，就写这么多了，以后如果有其他的再补上。