导航参数传递 - 元素码农

发布时间: 2025-03-23 08:20

↑

# 导航参数传递

本文将详细介绍React Navigation中的参数传递机制,帮助你理解如何在不同页面间传递和管理数据。通过掌握参数传递的各种方法,你将能够构建出数据流转更加清晰的应用。

## 参数传递概述

在React Navigation中传递参数的方式:

- 导航时传递参数
- 静态参数配置
- 初始参数设置
- 参数更新机制

## 基础用法

### 1. 传递参数

```javascript
function HomeScreen({ navigation }) {
  return (
    <Button
      title="Go to Details"
      onPress={() => {
        navigation.navigate('Details', {
          itemId: 86,
          title: '商品详情',
          otherParam: '其他参数',
        });
      }}
    />
  );
}
```

### 2. 接收参数

```javascript
function DetailsScreen({ route, navigation }) {
  // 解构参数
  const { itemId, title, otherParam } = route.params;

return (
    <View style={styles.container}>
      <Text>Item ID: {itemId}</Text>
      <Text>Title: {title}</Text>
      <Text>Other Param: {otherParam}</Text>
    </View>
  );
}
```

## 参数类型

### 1. 初始参数

```javascript
<Stack.Screen
  name="Details"
  component={DetailsScreen}
  initialParams={{
    itemId: 42,
    title: '默认标题',
  }}
/>
```

### 2. 静态参数

```javascript
function StaticParamsScreen({ navigation, route }) {
  return (
    <View style={styles.container}>
      <Text>Static Param: {route.params.static}</Text>
    </View>
  );
}

// 导航器配置
<Stack.Screen
  name="Static"
  component={StaticParamsScreen}
  options={{
    params: {
      static: '静态参数',
    },
  }}
/>
```

## 参数更新

### 1. 导航时更新

```javascript
navigation.navigate('Details', {
  itemId: 86,
  update: '更新的参数',
});
```

### 2. 页面内更新

```javascript
function UpdatableScreen({ navigation }) {
  const [count, setCount] = useState(0);

useEffect(() => {
    navigation.setParams({
      count: count,
    });
  }, [count]);

return (
    <Button
      title="Update Count"
      onPress={() => setCount(c => c + 1)}
    />
  );
}
```

## 类型检查

### 1. TypeScript定义

```typescript
// 定义参数类型
type RootStackParamList = {
  Home: undefined;
  Details: {
    itemId: number;
    title: string;
    otherParam?: string;
  };
  Profile: { userId: string };
};

// 使用类型
type Props = NativeStackScreenProps<RootStackParamList, 'Details'>;

function DetailsScreen({ route, navigation }: Props) {
  const { itemId, title } = route.params;
  // ...
}
```

### 2. PropTypes检查

```javascript
import PropTypes from 'prop-types';

function DetailsScreen({ route }) {
  return <View>{/* 组件内容 */}</View>;
}

DetailsScreen.propTypes = {
  route: PropTypes.shape({
    params: PropTypes.shape({
      itemId: PropTypes.number.isRequired,
      title: PropTypes.string.isRequired,
      otherParam: PropTypes.string,
    }).isRequired,
  }).isRequired,
};
```

## 最佳实践

1. 参数管理
```javascript
// 集中管理导航参数
const NavigationParams = {
  Details: {
    create: (itemId, title) => ({
      itemId,
      title,
      timestamp: Date.now(),
    }),
  },
};

// 使用
navigation.navigate('Details', NavigationParams.Details.create(86, '商品详情'));
```

2. 参数验证
```javascript
function validateParams(params) {
  if (!params) return false;
  if (typeof params.itemId !== 'number') return false;
  if (typeof params.title !== 'string') return false;
  return true;
}

function DetailsScreen({ route }) {
  useEffect(() => {
    if (!validateParams(route.params)) {
      // 处理无效参数
      navigation.goBack();
    }
  }, [route.params]);

// ...
}
```

3. 默认值处理
```javascript
function DetailsScreen({ route }) {
  const {
    itemId = -1,
    title = '未知标题',
    otherParam = null,
  } = route.params || {};

return (
    <View>
      <Text>ID: {itemId}</Text>
      <Text>Title: {title}</Text>
      {otherParam && <Text>Other: {otherParam}</Text>}
    </View>
  );
}
```

## 高级用例

### 1. 深层参数传递

```javascript
navigation.navigate('Root', {
  screen: 'Home',
  params: {
    screen: 'Feed',
    params: {
      id: 86,
      from: 'notification',
    },
  },
});
```

### 2. 参数监听

```javascript
function DetailsScreen({ route }) {
  useEffect(() => {
    // 参数变化时执行
    console.log('Params updated:', route.params);
  }, [route.params]);

return <View>{/* 组件内容 */}</View>;
}
```

### 3. 参数合并

```javascript
function mergeParams(oldParams, newParams) {
  return {
    ...oldParams,
    ...newParams,
    timestamp: Date.now(),
  };
}

navigation.setParams(mergeParams(route.params, {
  status: 'updated',
}));
```

## 参考资源

- [React Navigation参数文档](https://reactnavigation.org/docs/params)
- [TypeScript支持](https://reactnavigation.org/docs/typescript)
- [导航最佳实践](https://reactnavigation.org/docs/navigation-best-practices)

通过本文的学习,你应该已经掌握了:

1. 基本的参数传递方法
2. 不同类型参数的使用
3. 参数更新机制
4. 类型检查方案
5. 参数管理的最佳实践

记住,良好的参数传递设计能够使应用的数据流更加清晰和可维护。在实际开发中,要根据具体需求选择合适的参数传递方案,并注意参数的类型安全和验证。