来自 Stack.Screen 的 React Native Navigation Access Navigation答案

【问题标题】：React Native Navigation Access Navigation from Stack.Screen来自 Stack.Screen 的 React Native Navigation Access Navigation
【发布时间】：2020-08-08 09:28:26
【问题描述】：

我有一个这样设置的堆栈导航器：

<Stack.Navigator initialRouteName="Friends">
        <Stack.Screen
          name="Friends"
          component={Friends}
          options={{
            title: "Friends",
            headerStyle: {
              backgroundColor: colors.white,
            },
            headerTintColor: "#fff",
            headerTitleStyle: {
              fontWeight: "700",
              color: colors.red,
              fontSize: 20,
            },
            headerRight: () => (
              <TouchableOpacity
                style={{ marginRight: 20 }}
                onPress={() => /*NAVIGATE TO ADD FRIEND*/ }
              >
                <Ionicons name="md-person-add" size={20} color={colors.red} />
              </TouchableOpacity>
            ),
          }}
        />
        <Stack.Screen
          name="AddFriend"
          component={AddFriend}
          options={{
            title: "Add Friend",
            headerStyle: {
              backgroundColor: colors.white,
            },
            headerTintColor: "#fff",
            headerTitleStyle: {
              fontWeight: "700",
              color: colors.red,
              fontSize: 20,
            },
          }}
        />
      </Stack.Navigator>

如您所见，我在“好友”屏幕标题的右侧有一个按钮，当单击该按钮时，我想导航到“添加好友”屏幕。

但是，我不知道如何访问您通常通过传递到 Stack.Screen 的组件内部的 props.navigation 访问的导航对象。

我怎样才能做到这一点？

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

你可以像下面这样访问导航，选项可以是一个接受导航、路由和参数的函数。

<Stack.Screen
      name="Friends"
      component={Friends}
      options={({navigation})=>({
        title: "Friends",
        headerStyle: {
          backgroundColor: colors.white,
        },
        headerTintColor: "#fff",
        headerTitleStyle: {
          fontWeight: "700",
          color: colors.red,
          fontSize: 20,
        },
        headerRight: () => (
          <TouchableOpacity
            style={{ marginRight: 20 }}
            onPress={() => navigation.navigate('AddFriend') }
          >
            <Ionicons name="md-person-add" size={20} color={colors.red} />
          </TouchableOpacity>
        ),
      })}
    />

【讨论】：