React 堆栈导航，如何在没有路由的情况下传递状态

Question

我有四个组件 A、B、C、D。每个组件都有其本地状态。这些是使用反应堆栈导航堆叠的现在我想将 A、B 和 C 中的每个本地状态传递给最后一个组件 D。我不需要给出路线。我已经有了使用 prop.navigation.navigate 的 onPress 路线，它带我从 A 到 B 到 C 到 D。我只需要将A的状态直接传递给D，B传递给D，C传递给D？

Answer 1

以下是如何将状态从 A、B、C 传递到 D。您只需在导航到下一个 Screen 路由时将父级的状态作为参数传递给下一个 Screen 路由，然后您就可以借助以下命令访问这些参数route。

import React, { useState } from 'react';

import { Button, View, Text } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

function A({ navigation }) {

  const [fromA, setFromA] = useState('From A');

  return (

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

      <Text>A Screen</Text>

      <Button

        title="Go to B"

        onPress={() => navigation.navigate('B', { fromA: fromA })}

      />

    </View>

  );

}

function B({ navigation, route }) {

  const [fromB, setFromB] = useState('From B');

  const { fromA } = route.params;

  return (

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

      <Text>A Screen</Text>

      <Button

        title="Go to C"

        onPress={() => navigation.navigate('C', { fromA: fromA, fromB: fromB })}

      />

    </View>

  );

}

function C({ navigation, route }) {

  const [fromC, setFromC] = useState('From C');

  const { fromA, fromB } = route.params;

  return (

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

      <Text>A Screen</Text>

      <Button

        title="Go to D"

        onPress={() =>

          navigation.navigate('D', { fromA: fromA, fromB: fromB, fromC: fromC })

        }

      />

    </View>

  );

}

function D({ navigation, route }) {

  const { fromA, fromB, fromC } = route.params;

  return (

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

      <Text>D Screen</Text>

      <Text>From Screen A: {fromA}</Text>

      <Text>From Screen B: {fromB}</Text>

      <Text>From Screen C: {fromC}</Text>

    </View>

  );

}

const Stack = createStackNavigator();

function App() {

  return (

    <NavigationContainer>

      <Stack.Navigator initialRouteName="A">

        <Stack.Screen name="A" component={A} />

        <Stack.Screen name="B" component={B} />

        <Stack.Screen name="C" component={C} />

        <Stack.Screen name="D" component={D} />

      </Stack.Navigator>

    </NavigationContainer>

  );

}

export default App;