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