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

[fanlvwen]

相关平台

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

[fanlvwen]

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

[86chenjie]

同样碰到了这个问题。

[86chenjie]

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

[wwvevy]

需要给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'
}

就行了

[fanlvwen]

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

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

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

[86chenjie]

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