如何使用底部导航和反应导航更改路线？

Question

什么是正确和专业方式以及最佳实践来使用集中式路线，因为它是BottomNavigation 组件中的App.tsx？

目前我在 BottomNavigation 组件 中有一个“路线”伪造者，但是我想在此组件中使用根 (App.tsx) 中的路线。我该如何继续？

App.tsx

import "react-native-gesture-handler";
import React from "react";
import { DefaultTheme, Provider as PaperProvider } from "react-native-paper";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

// SCREEN'S
import HistoryScreen from "./components/screens/HistoryScreen";
import InvestmentScreen from "./components/screens/InvestmentScreen";
import PositionScreen from "./components/screens/PositionScreen";
import QuotationScreen from "./components/screens/QuotationScreen";
import UtilScreen from "./components/screens/UtilScreen";

// GLOBAL COMPONENT'S
import NavigationBottom from "./components/globals/NavigationBottom";
import AppbarHeader from "./components/globals/AppbarHeader";

const Stack = createStackNavigator();

export default function App() {
  return (
    <PaperProvider theme={theme}>
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="Quotation"
          screenOptions={{ header: (props) => <AppbarHeader {...props}/> }}
        >
          <Stack.Screen options={{ headerTitle: "Cotações" }} name="Quotation" component={QuotationScreen} />
          <Stack.Screen options={{ headerTitle: "Histórico" }} name="History" component={HistoryScreen} />
          <Stack.Screen options={{ headerTitle: "Investimentos" }} name="Investments" component={InvestmentScreen} />
          <Stack.Screen options={{ headerTitle: "Posição" }} name="Position" component={PositionScreen} />
          <Stack.Screen options={{ headerTitle: "Utilidades" }} name="Utilities" component={UtilScreen} />
        </Stack.Navigator>

        <NavigationBottom />
      </NavigationContainer>
    </PaperProvider>
  );
}

NavigationBottom.tsx

import * as React from 'react';
import { BottomNavigation, Text, useTheme } from 'react-native-paper';

const NavigationBottom = () => {
  const theme = useTheme();
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'quotation', title: 'Cotações', icon: 'finance' },
    { key: 'history', title: 'Histórico', icon: 'history' },
    { key: 'investments', title: 'Investimentos', icon: 'chart-pie' },
    { key: 'position', title: 'Posição', icon: 'wallet' },
    { key: 'utilities', title: 'Utilitários', icon: 'tools' },
  ]);

  const renderScene = BottomNavigation.SceneMap({
    quotation: () => <Text>Cotação Route</Text>,
    history: () => <Text>Histórico Route</Text>,
    investments: () => <Text>Histórico Route</Text>,
    position: () => <Text>Investimentos Route</Text>,
    utilities: () => <Text>Utilitario Route</Text>,
  });

  return (
    <BottomNavigation
      activeColor={theme.colors.accent}
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScene}
    />
  );
};

export default NavigationBottom;

Answer 1

你可以从@react-navigation/native 使用RouteProp ：

App.tsx

export type RouteStackParamList = {
  Start: undefined;
  Login: { param: string };
  Admin: undefined;
};


const App: FunctionComponent = () => {
  return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Start">
          <Stack.Screen name="Start" component={ClickToStartPage} />
          <Stack.Screen name="Login" component={LoginPage} />
          <Stack.Screen name="Admin" component={AdminPage} />
        </Stack.Navigator>
      </NavigationContainer>
  );
};

Login.tsx

export type MyRouteProp = RouteProp<RouteStackParamList, 'Login'>; // from app.tsx
interface LoginProps {
  route: RouteProp;
}

const Login: FunctionComponent<LoginProps> = (props) => {
  const { route } = props;

  route.params.param; // if you need a param
  route.name; // "Login"
 ...
}

对于更“干净的代码”架构，您可以在 App.tsx 和 Login.tsx 之间建立一个接口

App.tsx

export enum Routes {
  START = 'Start',
  LOGIN = 'Login',
  ADMIN = 'Admin',
}

{...}

<Stack.Screen name=Routes.START component={ClickToStartPage} />
<Stack.Screen name=Routes.LOGIN component={LoginPage} />
<Stack.Screen name=Routes.ADMIN component={AdminPage} />

Login.tsx

export type MyRouteProp = RouteProp<RootStackParamList, Routes.LOGIN>;