react-navigation 文档地址
该测试项目地址：https://github.com/chjwrr/-react-navigation4.x-Test/tree/master

安装

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-tabs

技术点

• createSwitchNavigator
• createStackNavigator
• createBottomTabNavigator
• withNavigation

实现功能

• Navigator+BottomTabNavigator
• 登录路由树、广告路由树、主程序路由树三种路由相互切换
• 动态修改切换TabNavigator（目前想到这一个办法~）
• BottomTabNavigator >tababr之间的切换
• 自定义View中使用Navigation
• 自定义tabbarItem
• 获取并修改tabbarItem点击事件
• 添加react-redux及其他常用库（后添加）

末尾有项目地址~

Navigator+BottomTabNavigator

创建tabbar src/tababr/index.js

import { createBottomTabNavigator } from 'react-navigation-tabs';
const RouteConfigs = {
  HomePage: { screen: HomePage, },
  ChatPage: { screen: ChatPage, },
  FriendPage: { screen: FriendPage, },
  MyPage: { screen: MyPage, },
}

const TabNavigatorConfig = {
  initialRouteName: 'HomePage',
  tabBarPosition: 'bottom',
  animationEnabled: true,
  lazy: true,
  // tabBarComponent: props => (<CustomTabbarComponent />)
}

const TabNavigator = createBottomTabNavigator(
  RouteConfigs,
  TabNavigatorConfig
)

export default TabNavigator

创建navigation src/navigator/index.js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
const AppNavigator = createStackNavigator(
  {
    TabNavigator: { screen: TabNavigator },
    // 在此路由声明
    HomeDetail: { screen: HomeDetailPage },
    ChatDetail: { screen: ChatDetailPage },
    FriendDetail: { screen: FriendDetailPage },
    MyDetail: { screen: MyDetailPage },
  },
  {
    initialRouteName: 'TabNavigator',
    defaultNavigationOptions: { // 默认头部样式
      headerTintColor: 'green',
      headerStyle: {
        backgroundColor: 'red',
      },
      headerTitleStyle: {
        fontWeight: 'bold',
        fontSize: 30
      },
    },
    onTransitionStart:()=>{
      // card跳转动画开始时要调用的函数，执行取消键盘等操作
    },
    onTransitionEnd:()=>{
      // card跳转动画结束时要调用的函数。
    }
  }
)
export default createAppContainer(AppNavigator);

登录路由树、广告路由树、主程序路由树三种路由相互切换

主要通过 createSwitchNavigator 实现 src/navigator/index.js

• 1. 首先使用 createStackNavigator 创建三个路由树

const StartNavigator = createStackNavigator(
  { Start:{ screen: StartPage } },
  {}
)
const LoginNavigator = createStackNavigator(
  {
    Login:{  screen:LoginPage, },
    Register: { screen: RegisterPage }
  },
  {  initialRouteName: 'Login' }
)


const AppNavigator = createStackNavigator(
  { TabNavigator: { screen: TabNavigator }},
  {  initialRouteName: 'TabNavigator' }
)

• 2. 使用 createSwitchNavigator 合并，并且指定默认的路由树

const SwitchNavigator = createSwitchNavigator(
  {
    // 多个无关联的路由树
    StartRoute: { screen: StartNavigator },
    LoginRoute: { screen: LoginNavigator },
    AppRoute: { screen: AppNavigator },
  },
  { initialRouteName: 'LoginRoute' }
);

export default createAppContainer(SwitchNavigator);

• 三个路由树之间的切换（登录成功以后跳转到主程序路由树 或者 主程序登录过期跳转到登录路由树）

this.props.navigation.navigate('StartRoute')
this.props.navigation.navigate('LoginRoute')
this.props.navigation.navigate('AppRoute')

或者

import { SwitchActions } from 'react-navigation';
this.props.navigation.dispatch(SwitchActions.jumpTo({ routeName: 'LoginRoute' }));

动态修改切换TabNavigator

createSwitchNavigator 合并多个路由
新创建一个tabbar NoLoginTabNavigator

import { createBottomTabNavigator } from 'react-navigation-tabs';
const RouteConfigs = {
 HomePage: { screen: HomePage,  },
 ChatPage: { screen: ChatPage,  }
}
const TabNavigatorConfig = {
 initialRouteName: 'HomePage',
 tabBarPosition: 'bottom',
 animationEnabled: true,
 lazy: true,
 // tabBarComponent: props => (<CustomTabbarComponent />)
}
const TabNavigator = createBottomTabNavigator(
 RouteConfigs,
 TabNavigatorConfig
)
export default TabNavigator

const NoLoginAppNavigator = createStackNavigator(
  {
    TabNavigator: { screen: NoLoginTabNavigator },
    // 路由在此声明
  },
  {
    initialRouteName: 'TabNavigator'
  }
)

// 直接切换，createAnimatedSwitchNavigator可以动画切换
const SwitchNavigator = createSwitchNavigator(
  {
    // 多个无关联的路由树
    StartRoute: { screen: StartNavigator },
    LoginRoute: { screen: LoginNavigator },
    AppRoute: { screen: AppNavigator },
    NoLoginAppRoute: { screen: NoLoginAppNavigator },
  },
  { initialRouteName: 'LoginRoute' }
);

切换tabbar
this.props.navigation.navigate('NoLoginAppRoute')

BottomTabNavigator >tababr之间的切换

this.props.navigation.navigate('MyPage')
this.props.navigation.navigate('ChatPage')

自定义View中使用Navigation

主要使用 withNavigation

import { withNavigation } from 'react-navigation';
class ColorView extends Component<{}> {
  render() {
    return (
      <TouchableOpacity style={styles.container} onPress={()=>{
        this.props.navigation.push('HomeDetail')
      }}>
      </TouchableOpacity>
    );
  }
}

export default withNavigation(ColorView)

自定义tabbarItem

FriendPage: {
    screen: FriendPage,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: ()=>null,
      // 自定义单个tabbarItem
      tabBarIcon: ({focused, tintColor}) => (<View style = {{backgroundColor: focused ? 'red' : 'green', flex: 1}}><Text>好友</Text></View>), 
    })
  }

或者

const TabNavigatorConfig = {
  initialRouteName: 'HomePage',
  tabBarPosition: 'bottom',
  animationEnabled: true,
  lazy: true,
  // 自定义整个tabbarView
  tabBarComponent: props => (<CustomTabbarComponent />) 
}

获取并修改tabbarItem点击事件

MyPage: {
    screen: MyPage,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: '我的',
      tabBarIcon: ({focused, tintColor}) => (
        <Image />
      ),
      // tabBarOnPress:(obj)=>{
      //   console.log('my tabbar press!',obj);
      //   obj.defaultHandler()
      // },
      tabBarOnPress:async (obj)=>{
        let a = await doSomething...
        console.log('my tabbar press!',obj);
        // obj 中包含 navigation 可以跳转
        obj.defaultHandler()
      },
    })
  },

项目地址：https://github.com/chjwrr/-react-navigation4.x-Test/tree/master