react-native - React Native - 在 TextInput 中编辑清除按钮的命中率

Question

React Native 的 TextInput有一个 clearButtonMode 属性，它会在 iOS 输入区域的右侧显示一个小的 x 按钮，通过它可以清除文本。

我对该按钮的点击率有疑问。我相信它太小了，很容易错过。我必须多次按下才能击中正确的位置以激活它。

有没有办法自定义这个清除按钮 => 改变它的 hitSlop、颜色等？

Answer 1

您可以做的是用 View 和 Animated.View 包装您的 TextInput 元素，这样您就可以添加自己的带有 TouchableOpacity 的清除按钮，并选择图标、颜色、大小等。所以，基本上，它会是这样的:

<Animated.View style={...}>
  <TextInput value={...} style={...} onChangeText={...} />
  <TouchableOpacity>
    {/* HERE GOES YOUR CLEAR BUTTON, FOR EXAMPLE: */}
    <MaterialIcons size={24} color={'black'} name={'close'} />
  </TouchableOpacity>
</Animated.View>