推荐官网 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);
    }
}