React Navigation V5 的发布和之前版本写法上有些不同，这篇文章就讲Stack,BottomTab,Drawer使用和登录权限认证

v5移除了createSwitchNavigator登录权限认证会和之前有些变动

在新版React Navigation V5中使用的新的HOC模式,只需要在应用最外层包裹 NavigationContainer

import React from 'React'
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

文章涉及代码:github

开始使用React Navigation V5

createStackNavigator

· StackNavigator现在的写法类似数据结构的堆栈
默认情况下屏幕的跳转方式 ios 从右侧滑入,android 从底部划入，可以在ScreenOptions中设置屏幕的跳转方式 cardStyleInterpolator文档

  screenOptions={{
      cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
  }}>

import React from 'react';

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {HomeScreen, DetailsScreen} from './Screen';

const Stack = createStackNavigator();

function StackScreen() {
  return (
    <Stack.Navigator 
      screenOptions={{
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
      }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <StackScreen />
    </NavigationContainer>
  );
}

createDrawerNavigator

93rpr-zkv73.gif

点击按钮或从屏幕侧边划入显示抽屉界面

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();
function DrawerScreen() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Setting" component={SettingScreen} />
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <DrawerScreen/>
    </NavigationContainer>
  );
}

createBottomTabNavigator

屏幕底部TabBar

import React from 'react';
import {View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
const TabBarIcon = (focused, color) => {
  return (
    <View
      style={{
        width: focused ? 24 : 18,
        height: focused ? 24 : 18,
        backgroundColor: color,
      }}
    />
  );
};
function TabScreen() {
  return (
    <Tab.Navigator
      tabBarOptions={{activeTintColor: '#FD7328', inactiveTintColor: '#999'}}
      screenOptions={{
        tabBarIcon: ({focused, color}) => {
          return TabBarIcon(focused, color);
        },
      }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{title: '首页'}}
      />
      <Tab.Screen
        name="Mine"
        component={MineScreen}
        options={{title: '我的'}}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <TabScreen />
    </NavigationContainer>
  );
}

Stack,Drawer,BottomTab结合使用

import React from 'react';
import {View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {
  createStackNavigator,
  CardStyleInterpolators,
} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {HomeScreen, DetailsScreen, SettingScreen, MineScreen} from './Screen';

const Stack = createStackNavigator();

function StackScreen() {
  return (
    <Stack.Navigator
      screenOptions={{
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
      }}>
      <Stack.Screen name="Drawer" component={DrawerScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

const Drawer = createDrawerNavigator();

function DrawerScreen() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Tab" component={TabScreen} />
      <Drawer.Screen name="Setting" component={SettingScreen} />
    </Drawer.Navigator>
  );
}

const Tab = createBottomTabNavigator();

const TabBarIcon = (focused, color) => {
  return (
    <View
      style={{
        width: focused ? 24 : 18,
        height: focused ? 24 : 18,
        backgroundColor: color,
      }}
    />
  );
};
function TabScreen() {
  return (
    <Tab.Navigator
      tabBarOptions={{activeTintColor: '#FD7328', inactiveTintColor: '#999'}}
      screenOptions={{
        tabBarIcon: ({focused, color}) => {
          return TabBarIcon(focused, color);
        },
      }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{title: '首页'}}
      />
      <Tab.Screen
        name="Mine"
        component={MineScreen}
        options={{title: '我的'}}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <StackScreen />
    </NavigationContainer>
  );
}

登录权限认证

v5版本之前可以使用createSwitchNavigator做登录身份认证，在V5版本移除了这个方法，可以使用V5新特性，根据状态定义和更改导航器的内容

本次使用react Context进行管理，也可根据项目需要使用redux和mobx

1.创建context

import React from 'react';

export const AuthContext = React.createContext();

2.屏幕导航

// screen
export function SettingScreen() {
  const {signOut} = React.useContext(AuthContext);
  return (
    <BaseCenterView>
      <Text>设置</Text>
      <Button
        title="退出登录"
        onPress={() => {
          signOut();
        }}
      />
    </BaseCenterView>
  );
}
export function SignInScreen() {
  const {signIn} = React.useContext(AuthContext);
  return (
    <BaseCenterView>
      <Text>登录页面</Text>
      <Button
        title="登录"
        onPress={() => {
          signIn();
        }}
      />
    </BaseCenterView>
  );
}
export function SplashScreen() {
  return (
    <BaseCenterView>
      <Text>loading...</Text>
    </BaseCenterView>
  );
}

// Auth屏幕堆栈
const AuthStack = createStackNavigator();
const AuthStackScreen = () => (
  <AuthStack.Navigator headerMode="none">
    <AuthStack.Screen name="SignIn" component={SignInScreen} />
  </AuthStack.Navigator>
);

// APP堆栈
const Drawer = createDrawerNavigator();
function DrawerScreen() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Tab" component={TabScreen} />
      <Drawer.Screen name="Setting" component={SettingScreen} />
    </Drawer.Navigator>
  );
}

const Tab = createBottomTabNavigator();
const TabBarIcon = (focused, color) => {
  return (
    <View
      style={{
        width: focused ? 24 : 18,
        height: focused ? 24 : 18,
        backgroundColor: color,
      }}
    />
  );
};

function TabScreen() {
  return (
    <Tab.Navigator
      tabBarOptions={{activeTintColor: '#FD7328', inactiveTintColor: '#999'}}
      screenOptions={{
        tabBarIcon: ({focused, color}) => {
          return TabBarIcon(focused, color);
        },
      }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{title: '首页'}}
      />
      <Tab.Screen
        name="Mine"
        component={MineScreen}
        options={{title: '我的'}}
      />
    </Tab.Navigator>
  );
}

const MainStack = createStackNavigator();
function MainStackScreen() {
  return (
    <MainStack.Navigator
      screenOptions={{
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
      }}>
      {/* <MainStack.Screen name="Drawer" component={DrawerScreen} /> */}
      <MainStack.Screen name="Home" component={HomeScreen} />
      <MainStack.Screen name="Details" component={DetailsScreen} />
    </MainStack.Navigator>
  );
}

// Root堆栈
const RootStack = createStackNavigator();
const RootStackScreen = ({userToken = false}) => (
  <RootStack.Navigator headerMode="none">
    {userToken ? (
      <RootStack.Screen
        name="App"
        component={MainStackScreen}
        options={{
          animationEnabled: false,
        }}
      />
    ) : (
      <RootStack.Screen
        name="Auth"
        component={AuthStackScreen}
        options={{
          animationEnabled: false,
        }}
      />
    )}
  </RootStack.Navigator>
);

// 主路由
export default () => {
  const [isLoading, setIsLoading] = React.useState(true);
  const [userToken, setUserToken] = React.useState(null);

  const authContext = React.useMemo(() => {
    return {
      signIn: () => {
        setIsLoading(false);
        setUserToken('asdf');
      },
      signUp: () => {
        setIsLoading(false);
        setUserToken('asdf');
      },
      signOut: () => {
        setIsLoading(false);
        setUserToken(null);
      },
    };
  }, []);

  React.useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  }, []);
  if (isLoading) {
    return <SplashScreen />;
  }
  return (
    <AuthContext.Provider value={authContext}>
      <NavigationContainer>
        <RootStackScreen userToken={userToken} />
      </NavigationContainer>
    </AuthContext.Provider>
  );
};

结束

文章涉及代码:github