網(wǎng)上有很多相當詳細的教程，但是都不夠精煉，對于初學者來說，要的不是那么多各種屬性設置，而是先實現(xiàn)效果，本篇就是先教各位初學者實現(xiàn)堆疊導航的最基本方法。
1. 引入react-navigation組件
進入項目根目錄命令行輸入
npm install --save react-navigation
2. 新建兩個頁面 并配置路由
新建兩個js文件，這里我命名為MainScreen.js 和 CatScreen.js
接下來配置路由，路由用來裝載各個頁面以供調(diào)用跳轉(zhuǎn)
在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 是供外部調(diào)用的名稱 相當于key， MainScreen 指向 MainScreen頁面
Cat:{screen:CatScreen}
},{
initialRouteName:'Main' // 設置默認顯示頁面 Main
})
AppRegistry.registerComponent('NewDemo', () => App); // 注冊路由
3. 為主頁面添加跳轉(zhuǎn)方法
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')} />
// 這里設置一個按鈕 點擊調(diào)用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;
