React Native如何通过Modal向其他页面传递数组参数

传参失效的核心原因是，通过navigation.navigate跳转页面时，React Navigation 传给页面组件的route参数不是直接等于你传入的自定义参数，而是框架封装后的固定结构，你传递的所有自定义参数（包括数组类型）都会挂载在route.params字段下。你在Modal中直接给组件传route={customerdt}（直接传数组），组件内部按照原有逻辑取route.params.customerdt时自然无法拿到正确值。

只需要对齐React Navigation的route参数结构传参即可，不需要修改Editcustomer页面的原有接收逻辑，不管是数组、对象还是基础类型参数都可以正常传递，修改后的Modal内组件传参代码如下：

<Modal
    animationType="slide"
    transparent={true}
    visible={modalVisibleProd}>
    <View
      style={[
        global.commonModalbg,
        {justifyContent: 'center', alignItems: 'center'},
      ]}>
      <View style={[global.modalBoxscreeen, global.commonBoxshadow]}>
        <Editcustomer
          navigation={navigation}
          // 对齐路由参数结构，自定义参数统一放在params下
          route={{
            key: 'EditcustomerInModal',
            name: 'Editcustomer',
            params: {
              customerdt: customerdt // 此处直接传入你的数组类型参数即可
            }
          }}
          onClosemodel={onClosemodel}
        />
      </View>
    </View>
  </Modal>

如果Editcustomer页面内部有调用navigation.goBack()这类返回逻辑，建议对传入的navigation方法做简单适配，避免平板端点击返回按钮时直接退出整个页面，而是触发Modal关闭逻辑，适配写法参考：

<Editcustomer
  navigation={{
    ...navigation,
    goBack: () => onClosemodel()
  }}
  route={{
    key: 'EditcustomerInModal',
    name: 'Editcustomer',
    params: {
      customerdt: customerdt
    }
  }}
  onClosemodel={onClosemodel}
/>

这种写法下，Editcustomer页面不需要写任何端侧判断逻辑，移动端跳转、平板端Modal渲染两种场景都可以正常运行，参数传递、页面交互逻辑完全复用。

内容的提问来源于stack exchange，提问作者Arnold Brown