下面的代码建立在 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'