Rn项目 集成react-navigation ，redux, 并且添加底部导航切换

No.1 添加依赖

yarn add react-navigation  
yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-native-screens
yarn add react-navigation-stack
yarn add react-navigation-redux-helpers
yarn add react-navigation-tabs

No.2 添加关联

# ios:
    * cd ./ios 
    * pod install
# android:
    * 请在android/app/build.gradle 中 dependencies 选项中添加下面这两行
    * implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
    * implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

以上就做好添加 react-navigation 的配置了！

No.3 创建一个 app.navigation.js 文件

• 引入 import { createStackNavigator } from 'react-navigation-stack'

设置一个根路由 export const rootCom = 'Init' // 设置根路由

创建路由实例

import IndexTabs from 'IndexTabs' // IndexTabs, 底部导航切换页面
import StartPage from '../pages/start-page/start.page' // 广告页面
const MainNavigator = createStackNavigator({  IndexTabs: {    screen: IndexTabs,    navigationOptions: {      header: null    }  }})

const InitNavigator = createStackNavigator({  StartPage: {    screen: StartPage,    navigationOptions: {      headerTitle: '广告页面'    }  }})

createSwitchNavigator 作用是给每个 createStackNavigator 设置一个根路由，当达到这个设置的根路由的时候，就不能在进行返回了

用法如下:

export const RootNavigator = createSwitchNavigator(  {    Init: InitNavigator,    Main: MainNavigator,  },  {    initialRouteName: rootCom // 主键路由  })

• export default createAppContainer(RootNavigator)

• 在 app.js 文件中引入

• import RootNavigator from './routers/app.navigation'
  // 在 render 中 添加 
  <RootNavigator />

至此，一个路由导航就完成了！

集成 redux 下期更新