React Native中如何实现视图间数据传递？含数组传递（react-navigation）

嘿，我来帮你搞定这两个React Native的数据传递问题！

一、React Native中视图间数据传递的常见方式 #

在React Native里，不同视图（组件/页面）间传递数据有几种实用方案，你可以根据场景灵活选择：

• 导航参数传递（页面跳转首选）：像你在用的react-navigation这类导航库，跳转时直接把数据打包进导航参数，目标页面读取即可，不管是简单值还是复杂对象、数组都能传。
• 全局状态管理：如果是多个页面需要共享的数据（比如用户信息、全局配置），用Redux、Zustand或者React的Context API来统一管理，任何组件都能直接获取或修改状态。
• 回调函数（父子组件场景）：如果是父视图和子视图之间传数据，父组件可以传一个回调函数给子组件，子组件调用这个函数就能把数据回传给父组件。
• 持久化存储：要是数据需要长期保存（重启APP后还能获取），可以用AsyncStorage、Realm或者SQLite这类本地存储方案，存好后在任意页面都能读取。

二、用react-navigation传递数组的具体实现 #

你现在用的this.navigation.navigateWithDebounce和普通的navigate用法几乎一致，第二个参数就是用来传递参数的对象，直接把数组加进去就行，具体步骤如下：

1. 发起跳转时传递数组 #

假设你要传递的数组是myTargetArray，修改你的跳转代码：

// 示例数组，你可以换成自己的数组
const myTargetArray = [10, 20, 30, { name: "test" }, "demo"];

// 在第一个页面发起跳转
this.navigation.navigateWithDebounce('BlaBlaView', {
  title: 'BlaBla View',
  transferArray: myTargetArray // 把数组作为参数加入对象
});

2. 在目标页面（BlaBlaView）接收数组 #

根据你的组件类型，有两种接收方式：

// 函数组件写法
function BlaBlaView({ route }) {
  // 解构参数，可加默认值避免未定义报错
  const { title, transferArray = [] } = route.params || {};
  
  // 现在就能使用传递过来的数组了
  console.log('拿到的数组：', transferArray);
  
  return (
    // 你的页面渲染内容
  );
}

// 类组件写法
class BlaBlaView extends React.Component {
  render() {
    const { title, transferArray = [] } = this.props.route.params || {};
    console.log('拿到的数组：', transferArray);
    
    return (
      // 你的页面渲染内容
    );
  }
}

小提示 #

如果数组体积特别大，或者需要在多个页面共享，更推荐用全局状态管理工具（比如Zustand），避免频繁通过导航参数传递大数据带来的性能问题。

内容的提问来源于stack exchange，提问作者Manikandan K