rn中Input动态设置focus无法聚焦

[xing-ou]

相关平台

React Native

复现仓库

https://github.com/xing-ou/TaroBugDemo
小程序基础库: 2.22.0
使用框架: React

复现步骤

export default function Index() {
  const [focusState, setFocusState] = useState(false);
  return <View>
    <Input focus={focusState} placeholder='请输入手机号码'></Input>    
    <Button onClick={(e) => { setFocusState(true);  }}>点击获取聚焦</Button>
    <Button onClick={(e) => { setFocusState(false); }}>点击失去聚焦</Button>
  </View>
}

期望结果

期望点击获取聚焦，在rn上能让输入框聚焦

实际结果

不能聚焦

环境信息

 Taro CLI 3.4.1 environment info:
    System:
      OS: macOS 12.0.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
      Yarn: 1.22.5 - ~/.yarn/bin/yarn
      npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.4.1 => 3.4.1
      @tarojs/components: 3.4.1 => 3.4.1
      @tarojs/mini-runner: 3.4.1 => 3.4.1
      @tarojs/react: 3.4.1 => 3.4.1
      @tarojs/runtime: 3.4.1 => 3.4.1
      @tarojs/taro: 3.4.1 => 3.4.1
      @tarojs/webpack-runner: 3.4.1 => 3.4.1
      babel-preset-taro: 3.4.1 => 3.4.1
      eslint-config-taro: 3.4.1 => 3.4.1
      react: ^17.0.2 => 17.0.2
      react-native: ^0.66.0 => 0.66.4

[github-actions]

等待热心的小伙伴解决问题中..., 有一些相关的 issues 可能帮助到你!

• Taro3.4.2 Vue2 H5 input 输入框 v-model 和 value无法初始化
• 原生项目使用taro，小程序包体积过大无法进行预览上传
• 3.4.2 uploadFile 中的 progress 方法使用时报错

Thank you so much!

[shinken008]

rn TextInput 不支持修改 focus 属性聚焦失焦，使用 ref 修改，https://reactnative.dev/docs/textinput#focus

使用 inputRef.current.focus()

实际上 Taro Component 的 ref 没有取到 focus 方法，当然这是另外一个问题 #12443