React-Native学习笔记之：实现简单地登录页面

 学习React Native一些时间了，想自己根据学习的知识开发个简单地独立地APP，今天开始第一步，实现登录界面功能：

index.ios.js或者index.android.js

import React, {Component} from 'react';
import {
    AppRegistry,
} from 'react-native';
import Welcome from './pages/Welcome'
AppRegistry.registerComponent('DeviceRnApp', () => Welcome);

Login.js:

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
    TextInput,
    TouchableHighlight
} from 'react-native';
import MainPage from './MainPage'
export default class Login extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (<View style={styles.container}>
            <View style={styles.item}><Text style={styles.textStyle}>用户帐号：</Text>
                <TextInput
                    ref="inputLoginName"
                    autoFocus={true}
                    underlineColorAndroid="gray"
                    placeholder="请输入用户名"
                    clearTextOnFocus={true}
                    clearButtonMode="while-editing"
                    style={{flex: 1}}
                    onChangeText={(input) => this.setState({username: input})}
                ></TextInput>
            </View>
            <View style={styles.item}><Text style={styles.textStyle}>用户密码：</Text>
                <TextInput
                    ref="inputLoginPwd"
                    underlineColorAndroid="gray"
                    placeholder="请输入密码"
                    clearTextOnFocus={true}
                    clearButtonMode="while-editing"
                    style={{flex: 1}}
                    onChangeText={(input) => this.setState({userpwd: input})}></TextInput>
            </View>
            <TouchableHighlight style={styles.login}
                                underlayColor='transparent'
                                onPress={()=>this.loginInMainpage()}><Text
                style={styles.loginText}>登录</Text></TouchableHighlight>
        </View>)
    }

    /**
     * 登录进入主页面
     */
    loginInMainpage() {
        this.refs.inputLoginName.blur();
        this.refs.inputLoginPwd.blur();
        this.props.navigator.resetTo({
            component: MainPage,
            params: {
                logNmae: this.state.username,
                logPwd: this.state.userpwd,
                parentComponent: this,
                ...this.props
            },
        });
    }

    setLoginName(input) {
        this.setState = {inputName: input}
    }

    setLoginPwd(input) {
        this.setState = {inputPwd: input}
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center'
    },
    item: {
        flexDirection: 'row',
        alignItems: 'center',
        margin: 10
    },
    textStyle: {
        fontSize: 18,
        color: 'black',
        marginRight: 10
    },
    login: {
        height: 40,
        backgroundColor: 'green',
        margin: 20,
        justifyContent: 'center',
    },
    loginText: {
        fontSize: 20,
        alignSelf: 'center',
        color: '#FFF'
    }

})

点击登录跳转到MainPage.js:

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
} from 'react-native';
export default class MainPage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (<View style={styles.container}>
            <Text style={styles.textStyle}>欢迎来到主界面</Text>
            <Text style={styles.textStyle}>您当前的用户名是：{this.props.logNmae}</Text>
            <Text style={styles.textStyle}>您当前的密码是：{this.props.logPwd}</Text>
        </View>)
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    textStyle: {
        fontSize: 18,
        color: 'black',
        marginRight: 10
    },
})

丑陋的效果图：