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

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。 您只需在导航到下一个屏幕路由时将父级的状态作为参数传递给它，然后您可以在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;

Expo Snack 上的实时应用示例

您可以在此处阅读完整文档：Passing parameters to routes