Question

我试图通过React native中的screenstack元素传递一些道具。我有一个按钮，onPress会使用如下所示的反应导航请求屏幕：

    <Button
      title="Lees Meer"
      color="#d10a10"
      onPress={() => RootNavigation.navigate('Article', {
        params: { title: title, text: text, image: image },
      })}
    />

我希望本文中使用thos params来填充文本，标题和图像。我以为我可以在文章中这样使用它们：

function ArticleFull({ navigation, params }) {
    return (
        <View>
            <Header/>
            <Card>
                <CardItem header bordered>
                    <Body>
                        <Image
                            style={{ width: '100%', height: 400 }}
                            source={{ uri: 'https://www.holland.com/upload_mm/9/a/b/68638_fullimage_zwolle_sassenpoort.jpg' }}
                        />
                        <Text>
                            {params.text}
                        </Text>
                    </Body>
                </CardItem>
            </Card>
            <Button
                title="Go Back"
                color="#d10a10"
                width= "10%"
                onPress={() => navigation.goBack()}
            />
        </View>
    );
}

export default ArticleFull;

在app.js中，我制作了这些屏幕集，用于导航到文章，但是我需要它包含一些使用按钮在首页中设置的参数。

const Stack = createStackNavigator（）;

App.js：

export default class App extends Component {

  render() {
    return (
      <NavigationContainer ref={navigationRef}>
        <Stack.Navigator initialRouteName="Home" >
          <Stack.Screen options={{headerShown: false}} name="Home" component={HomePage} />
          <Stack.Screen options={{headerShown: false}} name="Article" component={ArticleFull} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

Answer 1

您可以这样通过：-

 <Button
    title="Go to Details"
    onPress={() => {
      /* 1. Navigate to the Details route with params */
      navigation.navigate('Details', {
        itemId: 86,
        otherParam: 'anything you want here',
      });
    }}
  />

并收到如下信息：-

function DetailsScreen({ route, navigation }) {
 /* 2. Get the param */
 const { itemId } = route.params;
const { otherParam } = route.params;
 return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  <Text>itemId: {JSON.stringify(itemId)}</Text>
  <Text>otherParam: {JSON.stringify(otherParam)}</Text>
   );
  }

source

希望有帮助！

通过屏幕堆栈传递道具

1 个答案: