taro 键盘弹出的情况下,页面上的按钮需要点击两次才能响应事件

soat7uwm  于 2个月前  发布在  其他
关注(0)|答案(6)|浏览(24)

相关平台

React Native

使用框架: React

复现步骤

const index = (props) => {

    return (
        <>
            <Input placeholder={'test'} style={{backgroundColor:'#ffaa00',height:50,width:300}}/>
            <Button type='primary' onClick={() => {
                Taro.showToast({title: '点击了'})
            }}>点击测试</Button>
        </>
    )
  
}

期望结果

1.点击input,获取焦点后弹出了键盘
2.点击测试按钮,直接响应,收起键盘,显示toast

实际结果

点击页面,先隐藏了键盘,然后再次点击,按钮获取到点击事件

环境信息

Taro CLI 3.6.6 environment info:
    System:
      OS: Windows 10 10.0.17763
    Binaries:
      Node: 16.9.0 - D:\nodejs\node.EXE
      Yarn: 1.22.19 - D:\nodejs\yarn.CMD
      npm: 7.21.1 - D:\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 3.6.7 => 3.6.7
      @tarojs/components: 3.6.7 => 3.6.7
      @tarojs/helper: 3.6.7 => 3.6.7
      @tarojs/plugin-framework-react: 3.6.7 => 3.6.7
      @tarojs/plugin-html: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-alipay: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-h5: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-jd: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-qq: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-swan: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-tt: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-weapp: 3.6.7 => 3.6.7
      @tarojs/plugin-react-devtools: 3.6.7 => 3.6.7
      @tarojs/react: 3.6.7 => 3.6.7
      @tarojs/rn-runner: 3.6.7 => 3.6.7
      @tarojs/rn-supporter: 3.6.7 => 3.6.7
      @tarojs/runtime: 3.6.7 => 3.6.7
      @tarojs/runtime-rn: 3.6.7 => 3.6.7
      @tarojs/shared: 3.6.7 => 3.6.7
      @tarojs/taro: 3.6.7 => 3.6.7
      @tarojs/taro-rn: 3.6.7 => 3.6.7
      @tarojs/webpack5-runner: 3.6.7 => 3.6.7
      babel-preset-taro: 3.6.7 => 3.6.7
      expo: ~47.0.3 => 47.0.14
      react: ^18.1.0 => 18.2.0
      react-native: 0.70.7 => 0.70.7
w1e3prcc

w1e3prcc1#

参照网上的,外层嵌套ScrollView,加上 keyboardShouldPersistTaps="handled" ,没有效果

w3nuxt5m

w3nuxt5m2#

同样碰到了这个问题。

iaqfqrcu

iaqfqrcu3#

如果有结果了 麻烦更新下 万分感谢

mrphzbgm

mrphzbgm4#

需要给ScrollView加上属性: keyboardShouldPersistTaps="always".
如果自己的组件没有ScrollView, 也出现这个问题, 是因为runtime会自动给每个页面包裹一层ScrollView, 需要把这个参数传递过去.
目前官方尚未有这个方案, 所以只有先将就改源码来解决
@tarojs/runtime-rn/dist/page.js :
435行加上一个变量: const scrollViewOptions = (_e = (_d = (_c = globalAny.__taroAppConfig) === null || _c === void 0 ? void 0 : _c.appConfig) === null || _d === void 0 ? void 0 : _d.rn) === null || _e === void 0 ? void 0 : _e.scrollViewOptions;
然后把这个scrollViewOptions 传递给下一行的ScrollView的props.
最后在global的app.config.js 的rn属性加上

scrollViewOptions: {
      keyboardShouldPersistTaps: 'always'
}

就行了

avwztpqn

avwztpqn5#

如果有结果了 麻烦更新下 万分感谢

解决方法是对应config.js文件中禁止滚动 disableScroll:true
如果页面中有scrollView,那么需要设置scrollView的属性 keyboardShouldPersistTaps="handled"

这是我的项目里的解决方案,不知道你适不适用

1qczuiv0

1qczuiv06#

非常感谢大家的回复。
之前用taro是为了兼容小程序,现在放弃了。转向flutter了。

相关问题