react-native react-navigation6.x 路由跳转及传参

官网地址

 

如何使用

1. 首先需要在路由堆栈中注册路由

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NavigationContainer} from '@react-navigation/native';
import Login from '@/views/Login/index';
const Stack = createNativeStackNavigator();
const {Navigator, Screen} = Stack;
export default class MyRouter extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Navigator
          initialRouteName="Login"
          screenOptions={{
            headerShown: true,
            headerStyle: {
              backgroundColor: '#209cff',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
          }}>
          <Screen
            name="Login"
            component={Login}
            options={{headerShown: false}}
          />
        </Navigator>
      </NavigationContainer>
    );
  }
}

this.props.navigation.navigate('Order', {index: 0})

//'Order'为注册的路由名称 {}中为传递的参数

//如何接收

let { index } = this.props.route.params