React Native中Pressable点击后Modal不显示及跨页传参问题求助

Modal未弹出问题排查 #

该问题属于样式问题，你的点击事件和Modal显隐控制逻辑是正确的，问题出在两个样式配置上：

• 你给Modal配置了transparent: true，此时Modal不会自带全屏遮罩层，你定义的ModalContent仅设置了背景色和主轴方向，没有设置宽高、定位属性，实际渲染尺寸为0，肉眼不可见
• Modal组件被嵌套在ButtonContainers这个横向布局的容器内，会继承父容器的排版约束，即使有内容也会被限制在按钮栏的布局范围内

修复方案：

1. 将FirstModal组件移到Container根节点的最外层，不要嵌套在按钮容器内
2. 给ModalContent补充底部定位和尺寸样式，示例如下：

const ModalContent = styled.View`
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 300px;
  background-color: pink;
`

修改后就能实现从底部弹出的抽屉效果，符合你的需求。

Modal内修改原页面状态实现方式 #

直接遵循React单向数据流规则实现即可：

• 如果Modal在当前组件内实现，直接在Modal内的选项点击事件中，同步修改你用来控制页面元素展示的状态变量即可
• 如果Modal是抽离的独立组件，给Modal组件传递两个props：当前选中值的状态、修改该状态的更新函数，用户选择选项后调用传入的更新函数，即可同步修改父组件的状态，触发原页面重新渲染

自定义底部抽屉优化建议 #

如果需要实现拖拽收起、滑动等动效，可以直接使用React Native自带的PanResponderAPI监听手势，控制Modal内容的translateY偏移量即可，不需要引入额外第三方库。

内容的提问来源于stack exchange，提问作者Ibrahim Noor Mohammed