如何在 StackNavigator 中将参数传递到 screen ？

回答：

在React Navigation中，StackNavigator是一种常用的导航方式，用于在屏幕(screen)之间进行导航，并且可以传递参数。如果需要在StackNavigator中将参数传递到特定的screen，可以通过以下步骤实现：

1. 定义StackNavigator

首先需要定义StackNavigator，并设置所需的screens。例如：

javascript
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

2. 传递参数

从一个screen向另一个screen传递参数时，可以在navigation.navigate方法中使用第二个参数传递一个对象。例如，从HomeScreen向DetailsScreen传递参数：

javascript
// 在HomeScreen中
navigation.navigate('Details', { itemId: 42, otherParam: 'anything you want here' });

3. 接收参数

在目标screen（如DetailsScreen）中，可以通过route参数接收这些传递过来的参数：

javascript
// 在DetailsScreen中
function DetailsScreen({ route, navigation }) {
  const { itemId, otherParam } = route.params;

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Item ID: {itemId}</Text>
      <Text>Other Param: {otherParam}</Text>
      <Button
        title="Go back"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}

示例：

假设有一个在线商店应用，用户在HomeScreen上点击一个商品。我们希望点击时能够跳转到DetailsScreen并显示关于该商品的详细信息。可以通过上述步骤实现屏幕之间的参数传递，确保用户能看到所点击商品的详细信息。

通过这种方式，就可以在StackNavigator中有效地在不同的screens之间传递和接收参数，从而使应用的导航更加灵活和功能丰富。

在React Navigation中，StackNavigator是一种常用的导航方式，用于在屏幕(screen)之间进行导航，并且可以传递参数。如果需要在StackNavigator中将参数传递到特定的screen，可以通过以下步骤实现：

1. 定义StackNavigator

首先需要定义StackNavigator，并设置所需的screens。例如：

javascript
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

2. 传递参数

从一个screen向另一个screen传递参数时，可以在 navigation.navigate方法中使用第二个参数传递一个对象。例如，从 HomeScreen向 DetailsScreen传递参数：

javascript
// 在HomeScreen中
navigation.navigate('Details', { itemId: 42, otherParam: 'anything you want here' });

3. 接收参数

在目标screen（如 DetailsScreen）中，可以通过 route参数接收这些传递过来的参数：

javascript
// 在DetailsScreen中
function DetailsScreen({ route, navigation }) {
  const { itemId, otherParam } = route.params;

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Item ID: {itemId}</Text>
      <Text>Other Param: {otherParam}</Text>
      <Button
        title="Go back"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}

示例：

假设有一个在线商店应用，用户在 HomeScreen上点击一个商品。我们希望点击时能够跳转到 DetailsScreen并显示关于该商品的详细信息。可以通过上述步骤实现屏幕之间的参数传递，确保用户能看到所点击商品的详细信息。

通过这种方式，就可以在StackNavigator中有效地在不同的screens之间传递和接收参数，从而使应用的导航更加灵活和功能丰富。