Question

我有一个像这样的React Native StackNavigator：

const AppStack = () => {

  return (
    <NavigationContainer theme={{ colors: { background: "white" }}}>
      <Stack.Navigator headerMode="screen">
        <Stack.Screen name="Master" component={ Master } />
        <Stack.Screen
          name="Details"
          component={ Details }
          options={{ headerTitle: props => <Header {...props} /> }} // <-- how can I pass props from Master to the Header here
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

导航正常。当我在Master上时，如果按下TouchableOpacity，它将弹出Details，标题部分为Header。

但是，我想要的是将道具从Master传递到Header中的Details组件。

类似这样的东西：

{/* What I want is that onPress, I want to pass someones_name and someones_photo_url to
the Details' Header component */ }

const Master = () => {
  const someones_name = "Steve";
  const someones_photo_url = "http://somephoto.com/001.jpg";

  return (
    <TouchableOpacity onPress={() => navigation.navigate("Details")}>
      <Text>{ someones_name }</Text>
      <Image source={{ uri: someones_photo_url }}>
    </TouchableOpacity>
  )
}

这可能吗？

Answer 1

您可以在导航时通过以下操作将值传递给其他屏幕：

假设我在“ Feed”屏幕上，然后单击某人的姓名，因此我想转到“ Profile”屏幕，其中将显示我单击的用户名。

在屏幕Feed

中

props.navigation.navigate('Profile，{userName：'Shane'}）`

在屏幕Profile中，我可以使用以下方法获取通过navigate传递的值：

const { userName } = props.route.params

要在标题中设置此功能，前提是您的屏幕选项在屏幕组件之外并且无法访问props。考虑使用setOptions动态配置标题。

        props.navigation.setOptions({
            headerTitle: ...
        })

React Native StackNavigator：将道具从一个屏幕传递到下一个屏幕的标题

1 个答案: