React Native中如何在不同页面复用同一数组?
直接通过导航参数传递完整数组就能解决你的问题,无需全局变量或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
相关产品推荐
相关产品推荐

