react native中ScrollView嵌套TextInput安卓端有滑动问题

1.1 问题描述:
react native中ScrollView嵌套TextInput,TextInput组件设置了 textAligin:‘right’ 后安卓端按住TextInput组件的区域无法正常进行滑动

1.2 原因:
ScrollView嵌套TextInput后,滑动事件被TextInput组件使用,没有被父组件捕捉到滑动。

1.3 解决方案:
(1)使用多行输入属性

 multiline={true}

(2)去掉 textAligin:‘right’ 或者 设置textAligin为 (left, justify, auto)

(3)用TouchableOpacity包裹TextInput组件。⚠️:此种方法不能将光标移动到前面的位置,只能固定在最后,因为点击的事件是TouchableOpacity而非TextInput

render() {
  return (
    <TouchableOpacity
      activeOpacity={1}
      onPress={this.handleInputPress}
      style={{ flex: 1 }}
    >
      <View pointerEvents="none" style={{ flex: 1 }}>
        <TextInput
          ref={(input) => this.assignNumberInputRef(input)}
          {...this.props}
        />
      </View>
    </TouchableOpacity>
  );
}

1.4 相关链接:
TextInput with textAlign=‘right’ inside a ScrollView gets focused on scroll (Android only) #12167

ScrollView嵌套TextInput Android无法滑动

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐