Question

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

<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访问的导航对象。

我该如何实现？

Answer 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>
        ),
      })}
    />

从Stack.Screen反应本机导航访问导航

1 个答案: