expo-cli 项目中使用 react-navigation

下面的代码建立在 expo-cli 项目中

使用 react navigation 5.0

安装依赖包：

yarn add @react-navigation/native
// 安装 tab 导航
yarn add @react-navigation/bottom-tabs
// 安装 stack 导航
yarn add @react-navigation/stack
// 安装 icons
yarn add react-native-vector-icons

将下面依赖安装到 expo 管理的项目中

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

创建 src/router.js 文件

import * as React from 'react'
import { StatusBar } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createStackNavigator } from '@react-navigation/stack'
import AntDesign from 'react-native-vector-icons/AntDesign'

import LoginScreen from './screen/LoginScreen/Login'
import HomeScreen from './screen/HomeScreen'
import OrderScreen from './screen/OrderScreen'
import ProductScreen from './screen/ProductScreen'
import StoreScreen from './screen/StoreScreen'

const NavTab = createBottomTabNavigator();
const AppStack = createStackNavigator();
const TabStack = createStackNavigator();

function OrderNavigator() {
  return (
    <TabStack.Navigator>
      <TabStack.Screen
        name="Order"
        component={OrderScreen}
        options={{
          headerTitle: '订单',
          headerLeft: null,
          headerTitleAlign: 'center',
        }}
      />
    </TabStack.Navigator>
  );
}
 
function ProductNavigator() {
  return (
    <TabStack.Navigator>
      <TabStack.Screen
        name="Product"
        component={ ProductScreen }
        options={{
          headerTitle: '产品',
          headerLeft: null,
          headerTitleAlign: 'center',
        }}
      />
    </TabStack.Navigator>
  );
}
 
function StoreScreenNavigator() {
  return (
    <TabStack.Navigator>
      <TabStack.Screen
        name="Store"
        component={ StoreScreen }
        options={{
          headerTitle: '商店',
          headerLeft: null,
          headerTitleAlign: 'center',
        }}
      />
    </TabStack.Navigator>
  );
}

function TabBarNavigator() {
  return (
    <NavTab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          switch (route.name) {
            case 'Index':
              return <AntDesign name="home" size={size} color={color} />
            case 'Order':
              return <AntDesign name="paperclip" size={size} color={color} />
            case 'Product':
              return <AntDesign name="tago" size={size} color={color} />
            case 'Store':
              return <AntDesign name="isv" size={size} color={color} />
          }
        }
      })}>
      <NavTab.Screen
        name="Index"
        component={ HomeScreen }
        options={{ title: '主页' }}
      />
      <NavTab.Screen
        name="Order"
        component={ OrderNavigator }
        options={{ title: '订单' }}
      />
      <NavTab.Screen
        name="Product"
        component={ ProductNavigator }
        options={{ title: '产品' }}
      />
      <NavTab.Screen
        name="Store"
        component={ StoreScreenNavigator }
        options={{ title: '商店' }}
      />
    </NavTab.Navigator>
  );
}



function AppNavigator() {
  return (
    <AppStack.Navigator initialRouteName="Login">
      <AppStack.Screen
        name="Login"
        component={ LoginScreen }
        options={{
          title: '登录',
          headerShown: false
        }}
      />
      <AppStack.Screen
        name="Home"
        component={ TabBarNavigator }
        options={{
          headerShown: false
        }}
      />
    </AppStack.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <AppNavigator />
      <StatusBar />
    </NavigationContainer>
  )
}

项目根目录 App.js 文件中导入

import App from './src/router.js'

使用 react navigation 4.0

安装依赖包：

yarn add react-navigation
// 安装 tab 导航
yarn add react-navigation-tabs
// 安装 stack 导航
yarn add react-navigation-stack
// 安装 icons
yarn add react-native-vector-icons

将下面依赖安装到 expo 管理的项目中

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

创建 src/router.js 文件

import React from 'react'
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createBottomTabNavigator  } from 'react-navigation-tabs'
import AntDesign from 'react-native-vector-icons/AntDesign'

import LoginScreen from './screen/LoginScreen'
import HomeScreen from './screen/HomeScreen'
import OrderScreen from './screen/OrderScreen'
import ProductScreen from './screen/ProductScreen'
import StoreScreen from './screen/StoreScreen'

// 底部子导航，设置导航头
const OrderNavigator = createStackNavigator({
  Order: {
    screen: OrderScreen,
    navigationOptions: {
      title: '订单',
      headerLeft: () => null,
      headerTitleAlign: 'center'
    }
  }
})
const ProductNavigator = createStackNavigator({
  Product: {
    screen: ProductScreen,
    navigationOptions: {
      title: '产品',
      headerLeft: () => null,
      headerTitleAlign: 'center'
    }
  }
})
const StoreNavigator = createStackNavigator({
  Product: {
    screen: StoreScreen,
    navigationOptions: {
      title: '商店',
      headerLeft: () => null,
      headerTitleAlign: 'center'
    }
  }
})

// 底部导航栏
const BottomNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: '主页',
        tabBarIcon: ({tintColor, focused}) => 
          <AntDesign name="home" size={22} style={{ color: tintColor }} />
      }
    },
    Order: {
      screen: OrderNavigator,
      navigationOptions: {
        tabBarLabel: '订单',
        tabBarIcon: ({tintColor, focused}) => 
          <AntDesign name="paperclip" size={22} style={{ color: tintColor }} />
      }
    },
    Product: {
      screen: ProductNavigator,
      navigationOptions: {
        tabBarLabel: '产品',
        tabBarIcon: ({tintColor, focused}) => 
          <AntDesign name="tago" size={22} style={{ color: tintColor }} />
      }
    },
    Store: {
      screen: StoreNavigator,
      navigationOptions: {
        tabBarLabel: '商店',
        tabBarIcon: ({tintColor, focused}) => 
          <AntDesign name="isv" size={22} style={{ color: tintColor }} />
      }
    }
  },
  {
    // 修改底部导航样式
    tabBarOptions: {
      activeTintColor: '#FE4066',
      inactiveTintColor: 'gray',
    }
  }
)

// app 主导航栏
const AppNavigator = createStackNavigator(
  {
    Login: {
      screen: LoginScreen,
    },
    Main: {
      screen: BottomNavigator,
    },
  },
  {
    initialRouteName: 'Login',
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: 'pink'
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold'
      },
    },
    mode: 'modal',
    headerMode: 'none',
  }
)

const App = createAppContainer(AppNavigator)

export default App

项目根目录 App.js 文件中导入

import App from './src/router.js'