如何通过组件传递属性/值

Question

我正在尝试将道具从一个组件传递到另一个组件。我可以很容易地导航到该页面，只是无法通过该道具。

// NewGameScreen.jsx
import { useNavigation, useRoute } from '@react-navigation/native';
const NewGameScreen = () => {

//………………..

    const navigation = useNavigation();
    const figure = 8

    const goToEnteringEmailsScreen = () => {
        console.log("Number:", number);
        navigation.navigate('EnteringEmailsScreen', { figure });
    };

    return (
//……………
    );
};


export default NewGameScreen;

上面是我传递道具的代码。这是下面的接收组件：

// EnteringEmailsScreen.jsx
import React from 'react';
import { View, Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

const EnteringEmailsScreen = () => {
    const route = useRoute();
    console.log("Route Params:", route.params);
    const receivedFigure = route.params?.figure;
    console.log("Received figure:", receivedFigure);
    return (
        <View>

            <Text>Received figure: {receivedFigure}</Text>
        </View>
    );
};

export default EnteringEmailsScreen;

当我尝试控制台日志并捕获道具时，我总是遇到未定义的情况。谁能看到我犯了什么错误？文档表明它应该非常简单，但它对我不起作用。

我已经在我的问题中尝试了上面的代码，它使用 params 来尝试接收道具。

编辑：这是我在主 App.js 组件中的导航代码：

//App.js
//------------
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import NewGameScreen from "./NewGameScreen";
import EnteringEmailsScreen from "./EnteringEmailsScreen";

const Stack = createStackNavigator();

//………….

const EnteringEmailsStack = createStackNavigator();

const EnteringEmails = () => (
  <EnteringEmailsStack.Navigator>
    <EnteringEmailsStack.Screen
      name="NestedEnteringEmailsScreen"
      component={EnteringEmailsScreen}
      options={{ headerShown: false }}
    />
  </EnteringEmailsStack.Navigator>
);

export default function App() {

//…….
  return (
//………
      <NavigationContainer>
        <Stack.Navigator>
//………………………………………..
          <Stack.Screen name="EnteringEmailsScreen" component={EnteringEmails} />
        </Stack.Navigator>
      </NavigationContainer>
  );
}

Answer 1

无法正确传递参数的原因是您将其传递给了导航器，但没有将其传递给了嵌套屏幕。 所以当导航到屏幕时，而不是这个实现

navigation.navigate('EnteringEmailsScreen', { figure });

尝试

navigation.navigate('EnteringEmailsScreen', { screen: 'NestedEnteringEmailsScreen', figure });

Answer 2

在进一步查看文档后我解决了这个问题，我只是想在这里分享它。

const EnteringEmailsStack = createStackNavigator();

const EnteringEmails = () => (
  <EnteringEmailsStack.Navigator>
    <EnteringEmailsStack.Screen
      name="NestedEnteringEmailsScreen"
      component={EnteringEmailsScreen}
      options={{ headerShown: false }}
    />
  </EnteringEmailsStack.Navigator>
);

因此，上面我使用 EnteringEmails 的功能组件设置了嵌套导航器，这样我就可以导航到一个特定组件（EnteringEmailsScreen）。我认为我感到困惑的地方在于，我的嵌套导航器应该足以单独处理我所有的“嵌套屏幕”，而不是我为每个单独的屏幕创建了一个嵌套导航器组件，该组件可以工作，但非常笨重。 所以无论如何，这是主要导航容器内容的一部分：

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

所以我让它包含了我的嵌套组件 EnteringEmails。我最初虽然这个名称指的是该组件，但此时我可以将其命名为任何名称，只要我记下它即可。

后来在我使用的另一个组件中（它有效并解决了我的问题！）：

const goToEnteringEmailsScreen = () => {
    navigation.navigate("EnteringEmailsScreen", {
        screen: "NestedEnteringEmailsScreen",
        params: { number: 6 }
    })
};

因此，我在这里导航到上面在 Stack.Screen 中“命名”的组件。但这仍然只是一个嵌套的导航器组件，它可以（并且可能应该）包含多个屏幕。所以我必须设置它是什么屏幕，这恰好是我的嵌套导航器中唯一的屏幕（但我仍然必须指定它）并设置参数。

我希望这对像我一样困惑的人有所帮助。我的主要问题是没有真正完全理解嵌套导航器以及在一个嵌套导航器中拥有多个屏幕的想法。