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

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

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

Login.js:

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

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

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

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

    setLoginPwd(input) {
        @H_301_6@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,} from 'react-native';
export @H_301_6@default @H_301_6@class MainPage @H_301_6@extends Component {
    constructor(props) {
        @H_301_6@super(props);
    }

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

丑陋的效果图：