1、安裝
以前當我們在使用react-navigation的時候盗舰,我們只需要使用下面一條命令安裝一下react-navigation就可以使用了晶府。
yarn add react-navigation
# 或者使用 npm
# npm install --save react-navigation
但是3.x以后的不僅僅只有這一條命令了,因為在新版本中钻趋,新增了一個原生庫react-native-gesture-handler
川陆,所以,不管是升級還是新安裝蛮位,都需要安裝這個庫
yarn add react-native-gesture-handler
# 或者使用 npm
# npm install --save react-native-gesture-handler
然后鏈接所有本地依賴項:
react-native link
2较沪、使用
在安裝3.x后,需要將最外層的包裹形式修改為createAppContainer
在之前的版本中土至,使用createStackNavigator
后购对,就會自動實現(xiàn)createAppContainer
,但在新版本中陶因,需要手動使用createAppContainer
來包裹最外層的路由骡苞。
import {createStackNavigator,createAppContainer} from 'react-navigation';
import HomePage from './js/HomePage';
import Page1 from './js/Page1';
import Page2 from './js/Page2';
const AppStackNavigator = createStackNavigator({
HomePage: {
screen: HomePage
},
Page1: {
screen: Page1
},
Page2: {
screen: Page2
}
});
export default createAppContainer(AppStackNavigator);
路由配置簡寫
假設我們對HomePage唯一的路由配置是頁面組件,我們不需要使用{screen:HomePage}配置格式楷扬,我們可以直接使用頁面組件解幽。
const AppStackNavigator = createStackNavigator({
HomePage: HomePage,
Page1:Page1,
Page2:Page2
});
3、RN混合中使用報錯
以上使用在純RN中是可以的烘苹,但是當我在混合中使用就會報下面錯躲株,至今還沒解決,如有解決方案镣衡,請指點
更新
RN混合中使用報錯的問題已經(jīng)解決了霜定,請看另一篇博客
http://www.reibang.com/p/066f95cde865