React Native之使用React Navigation导航器实现最简单的登录页面（记录学习）

最近在学习React Native，以前从来没有接触过，而且脑子笨，学起来比较吃力，只能一步一步来，昨天看了一天页面跳转，报的错也摸不着头脑，各种谷歌百度，不知道到底哪错了，最后终于在下班之后成功了，果然下班之后的程序员战斗力翻倍。虽说成功实现页面的跳转了，但是还是稀里糊涂的，不知道怎么就成功了，不过能成功实现就是好的开始嘛，所以今天写篇文章记录一下学习，使用React Navigation导航器一步一步来实现一个登录页面。

先放上React Navigation官方文档，英文文档比较详细。

首先安装React Navigation，安装过程大家参照上面的官方文档，一步一步很详细，跟着做就可以了，不过我安装过程中遇到一个问题，用DOS命令安装一直失败，不知道什么原因，看到一篇文章上说用管理员运行，然后一步一步又来一遍，果然可以了。

Windows+s 打开

 

安装成功以后新建一个项目  DOS命令进入要新建项目的目录，执行 react-native init LoginDemo

新建项目成功之后进入到项目根目录，执行 react-native run-android（我是android手机）

好的，运行成功，成功的第一步已经迈出。

 

用WebStorm打开新建的项目，我们在屏幕看到的东西就在App.js中写着。

 

一个简单的页面可以分为三个部分，参照下图

项目根目录新建一个包app

新建两个JavaScript文件，Login.js 和HelloWorld.js

先编写HelloWorld页面，引入View 和 Text组件， 

import {View, Text} from 'react-native';

然后在核心代码中的 return() 中输入以下代码

<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
    <Text>Hello World</Text>
</View>

然后修改启动APP打开的页面，项目根目录打开 index.js 修改代码如下：

引入HelloWorld组件，并将注册启动组件修改为HelloWorld

然后重新加载一下项目，等下登录成功之后将跳转到这个页面

好的，接着我们来完成登录页面的编写，布局很简单，两个文本框一个按钮，直接上代码

export default class Login extends Component {
    constructor() {
        super()
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.lineTopBottom}>
                    <Text>账号:</Text>
                    <TextInput style={styles.textInput}
                               onChangeText={(account) => this.setState({account})}/>
                </View>
                <View style={styles.lineTopBottom}>
                    <Text>密码:</Text>
                    <TextInput style={styles.textInput} secureTextEntry={true}
                               onChangeText={(password) => this.setState({password})}/>
                </View>
                <TouchableOpacity style={styles.button}>
                    <Text style={styles.buttonText}>登录</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    textInput: {
        marginLeft: 5,
        width: 200,
    },
    lineTopBottom: {
        alignItems: 'center',
        flexDirection: 'row',
        height: 44,
        borderBottomWidth: 1,
        borderBottomColor: '#D0D0D0',
    },
    button: {
        justifyContent: 'center',
        marginTop: 10,
        width: 100,
        height: 40,
        borderRadius: 20,
        backgroundColor: "#1E90FF",
    },
    buttonText: {
        color: "white",
        textAlign: "center",
    }
})

在TextInput中，我们用 onChangeText={(account) => this.setState({account})} 把输入的账号密码保存在State中，等到登录的时候取出来进行判断，如果有对基本组件使用还不熟悉的朋友，可以看一下ReactNative的中文网或英文网，还有阮一峰老师的Flex 布局教程：语法篇和Flex 布局教程：实例篇，了解一下基本的使用，方便更快的上手。

重新加载来看一下效果，别忘了修改启动组件哦

重新加载后如图所示，我们输入上账号和密码，按下登录按钮，没有任何反应，那是因为我们还没有给按钮添加点击事件

              

定义一个点击事件调用的方法

//自定义的方法，大家请使用属性来定义
    toLogin = () => {
        let account = this.state.account
        let password = this.state.password
        if (account == "abc" && password == "123"){
            alert('密码输入正确')
        }else {
            alert('您输入的账号或密码有误，请重新输入')
        }
    };

点击按钮来调用 toLogin 这个方法

OK，完美，不过大家在实际写登录页面调用方法别用我这种方法，问题很多，我有点懒~~~

       

接下来就是关键了，引入组件

import { createStackNavigator, createAppContainer } from "react-navigation";

创建堆栈导航器

const AppNavigator = createStackNavigator({
    Login: {
        screen: Login
    }
});

修改导出组件代码

重新加载，将看到一个带有空导航栏的登录页面

引用React Navigation官方文档的一段话：在React Native中，从Login.js导出的组件是应用程序的入口点(或根组件)——它是所有其他组件派生的组件。与导出createAppContainer的结果相比，在应用程序的根目录下对组件拥有更多的控制权通常很有用，因此让我们导出一个只呈现AppNavigator堆栈导航器的组件。

修改代码

const AppContainer = createAppContainer(AppNavigator);

export default class Login extends React.Component {
    render() {
        return <AppContainer />;
    }
}

然后我们向导航器中添加一条路径

const AppNavigator = createStackNavigator({
    Login: {
        screen: HomeScreen
    },
    Hello: {
        screen: HelloWorld
    },
});

修改toLogin方法中的代码

toLogin = () => {
        let account = this.state.account
        let password = this.state.password
        if (account == "abc" && password == "123"){
            this.props.navigation.push('Hello')
        }else {
            alert('您输入的账号或密码有误，请重新输入')
        }
    };

再来运行一下程序

登录页面的导航栏如果不想要，可以隐藏掉，在核心代码块中添加以下代码

static navigationOptions = {
        header:null,  //隐藏顶部导航栏
    };

 

结束，我是IT界的一个小学生，欢迎大家对我多多批评和指教，最后补上完整代码

import React, {Component} from 'react'
import {StyleSheet, View, Text, TextInput, TouchableOpacity} from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import HelloWorld from "./HelloWorld";

class HomeScreen extends Component {
    constructor() {
        super()
    }
    //自定义的方法，大家请使用属性来定义
    toLogin = () => {
        let account = this.state.account
        let password = this.state.password
        if (account == "abc" && password == "123"){
            this.props.navigation.push('Hello')
        }else {
            alert('您输入的账号或密码有误，请重新输入')
        }
    };

    static navigationOptions = {
        header:null,  //隐藏顶部导航栏
    };

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.lineTopBottom}>
                    <Text>账号:</Text>
                    <TextInput style={styles.textInput}
                               onChangeText={(account) => this.setState({account})}/>
                </View>
                <View style={styles.lineTopBottom}>
                    <Text>密码:</Text>
                    <TextInput style={styles.textInput} secureTextEntry={true}
                               onChangeText={(password) => this.setState({password})}/>
                </View>
                <TouchableOpacity style={styles.button}>
                    <Text style={styles.buttonText} onPress={this.toLogin}>登录</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    textInput: {
        marginLeft: 5,
        width: 200,
    },
    lineTopBottom: {
        alignItems: 'center',
        flexDirection: 'row',
        height: 44,
        borderBottomWidth: 1,
        borderBottomColor: '#D0D0D0',
    },
    button: {
        justifyContent: 'center',
        marginTop: 10,
        width: 100,
        height: 40,
        borderRadius: 20,
        backgroundColor: "#1E90FF",
    },
    buttonText: {
        color: "white",
        textAlign: "center",
    }
})

const AppNavigator = createStackNavigator({
    Login: {
        screen: HomeScreen
    },
    Hello: {
        screen: HelloWorld
    },
});

const AppContainer = createAppContainer(AppNavigator);

export default class Login extends React.Component {
    render() {
        return <AppContainer />;
    }
}

import React,{Component} from 'react'
import {View, Text} from 'react-native';

export default class HelloWorld extends Component{
    constructor(){
        super()
    }
    render(){
        return (
            <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Text>Hello World</Text>
            </View>
        )
    }
}