React Native 可点击数字与字母点击效果差异问题咨询

这个现象不是React Native针对小数字的专属bug，本质是点击热区（hitbox）与文本实际渲染尺寸不匹配导致的：

• 数字1、方括号这类窄字符的实际渲染宽度远小于同字号的普通字母，React Native默认仅将文本实际渲染的像素区域作为点击响应区，这类窄字符的有效点击区域天然就非常小
• 嵌套的Text组件默认没有额外内边距延伸点击热区，哪怕调大字号，1这类窄字符的宽度增量也远低于普通字母，所以点击灵敏度改善不明显
• 你测试时遇到的"test1"只有1难点击的情况，刚好对应了不同字符渲染宽度的差异，完全符合这个逻辑

以下方案都可以保证引用编号和前面文本保持同行，同时大幅提升点击灵敏度：

• 给可点击Text加内边距+hitSlop扩展热区（最推荐，不破坏原有排版）

<Text style={styles.textStyle}>
  {this.itemSentences()}
  <Text 
    style={{
      color: 'red',
      paddingHorizontal: 4,
      paddingVertical: 2
    }} 
    hitSlop={{top: 6, bottom: 6, left: 6, right: 6}}
    onPress={this.sourceNumberPressed.bind(this)}
  >[1]</Text>
</Text>

hitSlop不会改变组件的实际布局占位，只会额外扩展触摸响应范围，完全不会影响原有文本的对齐效果。

• 加零宽空格拓宽响应区
  如果不想调整样式，可以在数字前后加视觉不可见的零宽空格，悄悄拓宽点击区域：

<Text style={{color: 'red'}} onPress={this.sourceNumberPressed.bind(this)}>
  {'\u200B'}[1]{'\u200B'}
</Text>

• 用Touchable系列组件包裹（灵敏度最高）
  React Native 0.60+版本已支持Touchable组件嵌套在Text内同行展示，Touchable的触摸响应处理比嵌套Text更稳定：

<Text style={styles.textStyle}>
  {this.itemSentences()}
  <TouchableOpacity
    hitSlop={{top: 6, bottom: 6, left: 6, right: 6}}
    onPress={this.sourceNumberPressed.bind(this)}
  >
    <Text style={{color: 'red'}}>[1]</Text>
  </TouchableOpacity>
</Text>

内容的提问来源于stack exchange，提问作者NullHypothesis