記住在你入口文件index.js引入

import 'react-native-gesture-handler';

image.png

安裝yarn

npm install -g yarn

在您的React Native項目中安裝所需的軟件包； npm 和 yarn兩種方式導入

npm install @react-navigation/native
yarn add @react-navigation/native  

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

導航器安裝依賴

npm install @react-navigation/stack
yarn add @react-navigation/stack

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

底部導航

npm install @react-navigation/bottom-tabs
yarn add @react-navigation/bottom-tabs

import Ionicons from 'react-native-vector-icons/Ionicons';  //react-native圖標庫
export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused       //  自定義圖標  
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />; // 也可以引入本地圖片
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

image.png

隱藏頭部Header
1聊替、在您的導航中 options={{ headerShown: false }}
2春叫、從您的組件 navigation.setOptions({ headerShown: false })

        <Stack.Screen 
        name="Home" 
        component={HomeTabs}
        options={{ headerShown: false }}
        />

自定義頭部

        <Stack.Screen
            name="HomeScreen"
            component={HomeScreen}
            options={({navigation}) => ({ //頁面跳轉(zhuǎn)需要添加navigation參數(shù)
              headerLeft: () => {
                return (
                  <Button
                    title="返回"
                    onPress={() => {
                      Alert.alert('haha');
                    }}
                  />
                ),
              headerRight: () => (
                <Button
                  title="編輯"
                  onPress={() => {
                    navigation.push('DetailScreen');
                  }}
                />
              );
              },
            })}
          />