You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native中如何在不同页面复用同一数组?

解决React Navigation传递完整数组的简单方法

直接通过导航参数传递完整数组就能解决你的问题,无需全局变量或Redux/Flux,只需修正代码里的两处关键点:

1. 修复数组的State定义

你当前的useState没有用数组包裹对象,导致array实际只是单个对象而非数组。修改Menu.js的State初始化:

// Menu.js
export default function Menu({ navigation }) {
  // 用[]包裹对象,确保array是数组类型
  const [array, setArray] = useState([
    {text: '1', gender: 'm', key:'1'},
    {text: '2', gender: 'm', key:'2'},
    {text: '3', gender: 'm', key:'3'}
  ])
  
  const navigate = () => {
    // 导航时传入完整数组作为参数
    navigation.navigate('NextScreen', { fullArray: array })
  }
  
  return(
    <View>
      <Button title='NextScreen' onPress={navigate}></Button>
    </View>   
  )
}

2. 在NextScreen接收数组

通过route.params获取传递的数组,添加空值判断避免报错:

// NextScreen.js
export default function NextScreen({ navigation, route }) {
  // 从参数里取数组,没有则返回空数组
  const receivedArray = route.params?.fullArray || [];

  return(
    <View>
      {/* 示例:遍历渲染数组内容 */}
      {receivedArray.map(item => (
        <Text key={item.key}>{item.text} - {item.gender}</Text>
      ))}
    </View>
  )
}

这样就能完整传递数组,满足你的轻量场景需求。

内容的提问来源于stack exchange,提问作者user19556076

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.23 13:12:15