使用React Native将参数传递给另一个页面

npm install @react-navigation/native
npm install @react-navigation/stack

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="HomePage" component={HomePage} />
        <Stack.Screen name="DetailsPage" component={DetailsPage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

import React from 'react';
import { Button } from 'react-native';

function HomePage({ navigation }) {
  const params = { name: 'John', age: 25 };

  return (
    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('DetailsPage', params)}
    />
  );
}

export default HomePage;

import React from 'react';
import { View, Text } from 'react-native';

function DetailsPage({ route }) {
  const { name, age } = route.params;

  return (
    <View>
      <Text>Name: {name}</Text>
      <Text>Age: {age}</Text>
    </View>
  );
}

export default DetailsPage;