React-Native react-navigation St

网上有很多相当详细的教程，但是都不够精炼，对于初学者来说，要的不是那么多各种属性设置，而是先实现效果，本篇就是先教各位初学者实现堆叠导航的最基本方法。

1. 引入react-navigation组件

进入项目根目录命令行输入

npm install --save react-navigation

2. 新建两个页面 并配置路由

新建两个js文件，这里我命名为MainScreen.js 和 CatScreen.js

接下来配置路由，路由用来装载各个页面以供调用跳转

在index.js入口文件中写如下代码

import {AppRegistry} from 'react-native';

import {StackNavigator} from 'react-navigation'; // 引入react-navigation组件
import MainScreen from './MainScreen';
import CatScreen from './CatScreen'; //引入刚刚新建的两个页面

const App = StackNavigator({    // 使用StackNavigator方法配置路由
    Main:{screen:MainScreen},    // 配置路由 其中 Main 是供外部调用的名称 相当于key， MainScreen 指向 MainScreen页面
    Cat:{screen:CatScreen}
},{
    initialRouteName:'Main'    // 设置默认显示页面 Main 
})

AppRegistry.registerComponent('NewDemo', () => App);  // 注册路由

3. 为主页面添加跳转方法

import React from 'react';
import {Text , View , Button} from 'react-native';
import {StackNavigator } from 'react-navigation';

class MainScreen extends React.Component{
    static navigationOptions ={ 
        title:'MainPage'  // 设置当前页面的标题  更多属性设置请看其他大神的文章
    }
    render(){
        return (
            <View>
                <Text>这里是主页</Text>
                <Button title='点我去看猫!' onPress={()=>this.props.navigation.navigate('Cat')} />
                // 这里设置一个按钮 点击调用navigation的navigate方法  把 路由中配置的key传入
            </View>
        );
    }
}

export default MainScreen; // 别忘导出页面

4. 看猫页面

这个页面就可以想要什么写什么了，页面左上角会自带返回键

import React, {Component} from "react";
import {View, Text } from "react-native";
 
class CatScreen extends React.Component {
    static navigationOptions = {
        title: '猫在这里',
    };
    render() {
        return (
            <View>
                <Text>猫~~</Text>
            </View>
        );
    }
}
export default CatScreen;