weixin_39926588
weixin_39926588
2020-11-28 17:38

「iOS」RN与原生混合开发,从原生环境切到RN后,点击弹出的Picker却在Native环境打开?!

场景: 做了个地域选择级联,然后比如用户编辑放到RN环境,当从原生切到RN后,点击地域选择,结果发现Picker打开在切换前的原生界面里,在RN后面。……是初始化的时间点不对么?

简单说来就是直接在RN环境调用Picker显示ok;从原生切到RN后再调用,Picker却打开在了原生环境下。("react-native-picker": "^4.0.2")

不确定原因,看看有人碰到类似情况没有。

这里有个参考: https://segmentfault.com/a/1190000005761357

我再试试那个「For pure javascript version -> v3.0.5」

更新: 1. 最后,还是「For pure javascript version -> v3.0.5」好使; 2. "react-native-picker": "^4.0.2" 用作地域级联选择时,如果是二级级联,第二级选择貌似有个问题,就是点选不中目标城市,总是跳回第一项,不知是否为个别问题。临时取巧解决办法是构造三级级联数据结构,让中间那级唯一显示固定地区或空白

该提问来源于开源项目:beefe/react-native-picker

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

28条回答

  • weixin_39710594 weixin_39710594 5月前

    关键代码就这些,数据结构我看了也没问题,现在我已经把selectedValue给写死了 10122 1012 img_0596

    点赞 评论 复制链接分享
  • weixin_39822147 Easonxxy 5月前

    上代码。。。。 不是上图片。。。。 我要copy

    点赞 评论 复制链接分享
  • weixin_39822147 Easonxxy 5月前

    看你这个是iOS端,Android端正常吗?

    点赞 评论 复制链接分享
  • weixin_39710594 weixin_39710594 5月前

    现在只做了ios端,这个代码怎么上。。。。。我再看看。。。

    点赞 评论 复制链接分享
  • weixin_39822147 Easonxxy 5月前

    能否试下Android端?

    点赞 评论 复制链接分享
  • weixin_39963830 weixin_39963830 5月前

    运行下example里面的代码,试试会不会这样

    点赞 评论 复制链接分享
  • weixin_39710594 weixin_39710594 5月前

    也是这样的,跟我一模一样

    点赞 评论 复制链接分享
  • weixin_39822147 Easonxxy 5月前

    你该不会既设置了第一列的选中又设置了第二列的选中,并且第二列不属于第一列的子集吧?

    点赞 评论 复制链接分享
  • weixin_39710594 weixin_39710594 5月前

    不会啦,代码都放图片上了,而且example跑起来也是同样的问题

    点赞 评论 复制链接分享
  • weixin_39822147 Easonxxy 5月前

    嗯 测试了下 iOS有这个bug Android没问题,iOS已经在修复了 稍后会更新版本

    点赞 评论 复制链接分享
  • weixin_39710594 weixin_39710594 5月前

    刚刚还发现三个问题,1.如果这个picker是在一个modal页面里面,它会显示在modal层下面,我只能用其他的方法来代替在modal页面上的picker 2.在picker显示着的时候退出页面,picker不会马上收缩关闭,我现在只能在页面卸载的时候hide这个picker 3.我在IOS上显示的picker距离底部有一段空隙,我的解决办法是将BzwPicker.m文件第80行,最后的height-40改为height

    点赞 评论 复制链接分享
  • weixin_39822147 Easonxxy 5月前

    1. 建议不要在modal里面使用picker... 2. Android上你可以拦截返回键处理,先hide picker,然后再退出程序,iOS上没办法 3. 请不要改... iOS控件默认上下各有一部分边距,那个40是上面标题栏的高度,你改后滚轮控件会下移,导致最下面的字体会被遮挡显示不全,上面的字体会有很大的边距

    点赞 评论 复制链接分享
  • weixin_39963830 weixin_39963830 5月前

    新版本v4.0.4发布了

    点赞 评论 复制链接分享
  • weixin_39693101 weixin_39693101 5月前

    如果这个picker是在一个modal页面里面,它会显示在modal层下面这个问题,你最后用什么方式解决的?

    点赞 评论 复制链接分享
  • weixin_39693101 weixin_39693101 5月前

    找到了一个不错的解决方法,可以使用Modal。 datepicker.show() 在Modal的 onShow 方法里调用,就不会出现Modal遮挡住datepicker的情况了

    点赞 评论 复制链接分享
  • weixin_39822147 Easonxxy 5月前

    -github 新版本这个问题已经不存在了,在Modal里直接调用pick就行

    点赞 评论 复制链接分享
  • weixin_39956350 weixin_39956350 5月前

    -github 新版本这个问题已经不存在了,在Modal里直接调用pick就行

    ios下不会出现modal遮挡picker,安卓下出现

    点赞 评论 复制链接分享
  • weixin_39956350 weixin_39956350 5月前

    找到了一个不错的解决方法,可以使用Modal。 datepicker.show() 在Modal的 onShow 方法里调用,就不会出现Modal遮挡住datepicker的情况了

    在modal onshow 执行picker.show() 在安卓下 依旧会遮挡,你是怎么处理的?

    点赞 评论 复制链接分享
  • weixin_39807859 weixin_39807859 5月前

    哥们问题解决了吗,我在3.0.5上也是做地域级联,发现无法选中。我的RN版本是0.29.2,之前0.25.1是没有问题的。

    点赞 评论 复制链接分享
  • weixin_39926588 weixin_39926588 5月前

    1、"react-native-picker": "^4.0.2" 新版的没解决; 2、现在使用的是「For pure javascript version -> v3.0.5」,RN版本是最新的0.34,没发现无法选中问题

    点赞 评论 复制链接分享
  • weixin_39822147 Easonxxy 5月前

    如果当前picker是显示状态,不要做Reload和Debug之类的操作,一定要先让picker隐藏,然后再做Reload或者Debug等操作。

    点赞 评论 复制链接分享
  • weixin_39822147 Easonxxy 5月前

    二级级联没有发现你说的问题,我这边完全正常

    更新: 抱歉,当时仅测试了Android端,后来发现iOS端确实存在第二列显示的问题,问题已在v4.0.4版本修复。

    点赞 评论 复制链接分享
  • weixin_39807859 weixin_39807859 5月前

    问题修复了,是我代码的问题,感谢两位~

    点赞 评论 复制链接分享
  • weixin_39710594 weixin_39710594 5月前

    我也出现了二级级联总是跳到第一项的问题,你是怎么解决的呀?

    点赞 评论 复制链接分享
  • weixin_39822147 Easonxxy 5月前

    检查下你的代码,https://github.com/beefe/react-native-picker/issues/69

    点赞 评论 复制链接分享
  • weixin_39710594 weixin_39710594 5月前

    我用的4.0.3版本,这个问题只会出现在地区选择上,在日期选择上没有问题,这两个都是三级的,地区选择中第二列无论初始化为什么,都会跳转到第一条数据,代码检查过了没有问题。这bug实在太奇怪了。

    点赞 评论 复制链接分享
  • weixin_39807859 weixin_39807859 5月前

    我目前在用的3.0.5,没有上述的问题。似乎提主的问题跟你的近似

    点赞 评论 复制链接分享
  • weixin_39822147 Easonxxy 5月前

    代码贴下

    点赞 评论 复制链接分享

相关推荐