推薦官網 https://reactnavigation.org/

native 路由

介紹

這里介紹三種導航
堆棧導航 stack
底部欄導航 bottom-tabs
頂部導航 top-tabs

靜態導航

ezgif-2-3a4552ea069d.gif

ezgif-2-d8606d80ec2c.gif

安裝

npm install @react-navigation/native
npm install @react-navigation/stack
npm install @react-navigation/bottom-tabs
npm install @react-navigation/material-top-tabs react-native-tab-view

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

配置

要完成react-native-screensAndroid的安裝，請將以下兩行添加到中的dependencies部分android/app/build.gradle：

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

stack 堆棧導航

• NavigationContainer 路由容器
• createStackNavigator 創建堆棧導航方法

1. 導入組件

import { NavigationContainer } from '@react-navigation/native';
// 導入導航容器
import { createStackNavigator } from '@react-navigation/stack';
//  導入創建堆棧導航方法

2. 創建導航

const Stack = createStackNavigator();

3. 創建導航需要頁面

function Home() {
  return (
    <View>
      <Text>首頁</Text>
    </View>
  );
}

function Details() {
  return (
    <View>
      <Text>詳情頁面</Text>
    </View>
  );
}

4. 包裝頁面

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

export default App;

導航

navigation 從路由組件的props中獲取

navigation.push('Details')        切換頁面
navigation.replace('Details')     替換頁面
navigation.goBack()               返回
navigation.popToTop()             回到最頂層頁面

<Button
  title="再一次跳轉詳情"
  onPress={() => navigation.push('Details')} />

<Button 
    title="返回" 
    onPress={() => navigation.goBack()} />

<Button
    title="回到頂層"
    onPress={() => navigation.popToTop()} />

參數傳遞

傳遞參數

<Button
   title="跳轉到詳情"
   onPress={() => {
       navigation.navigate('Details', {
           itemId: 86,
           otherParam: '你想傳遞參數',
       });
   }}
/>

接受參數
通過props的route.params中獲取參數

function DetailsScreen({ route, navigation }) {
 const { itemId } = route.params;
 const { otherParam } = route.params;
 return (...)
}

初始化參數

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 initialParams={{ itemId: 42 }}
/>

配置標題

設置標題標題

<Stack.Screen
   name="Home"
   component={HomeScreen}
   options={{ title: '首頁' }}
/>

更新options與setOptions

<Button
  title="更新標題"
  onPress={() => navigation.setOptions({ title: '新標題' })}
/>

標題樣式

<Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{
      title: 'My home',
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }}
      />

options跨屏幕共享

<Stack.Navigator
  screenOptions={{
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }}
>
  <Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{ title: 'My home' }}
  />
</Stack.Navigator>

用自定義組件替換標題

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props => <image source={}>}}
      />
    </Stack.Navigator>
  );
}

標題按鈕

<Stack.Screen
        name="Home"
        component={Home}
        options={{
          headerRight: () => (
            <Button
              onPress={() => alert('設置被點擊')}
              title="設置"
              color="#fff"
            />
          ),
        }}
      />

StackNavigator navigationOptions 導航頁面的屬性和方法

title       - 可用作的headerBackTitle的標題。

header      - 函數返回一個React元素，用來作為標題。設置null會隱藏標題。
headerRight - 接受React Element將會顯示在標題的右側
headerStyle - 頂部欄的樣式
headerTitleStyle - 標題組件的樣式

擴展

navigationOptions 標簽欄的屬性和方法

title - 通用標題可以用作headerTitle和tabBarLabel。

tabBarVisible - 顯示或隱藏底部標簽欄，默認為true，不隱藏。

tabBarIcon - React Element或給定{focused：boolean，tintColor：string}的函數返回一個React.Node，用來顯示在標簽欄中。

tabBarLabel - 接收字符串、React Element或者給定{focused：boolean，tintColor：string}的函數返回一個React.Node，用來顯示在標簽欄中。如果未定義，會使用title作為默認值。如果想要隱藏，可以參考上面的tabBarOptions.showLabel。

tabBarOnPress - 標簽欄點擊事件回調，接受一個對象，其中包含如下：

image

tabBarOnPress: async (obj: any) => {
console.log(obj);
    try {
        const userData = await AsyncStorage.getItem('USER_INFO');
        if (userData) {
            obj.defaultHandler();
        }
        else {
            obj.navigation.navigate('Login');
        }
    } catch (e) {
        Toast.show(e.message, 'center', 1000);
    }
}