如何扩大嵌套的可点击引用文本的点击区域且不截断文本不放大整段

问题原因说明 #

React Native 中嵌套在<Text>内部的子<Text>组件默认不支持padding、margin属性，这是你之前修改样式不生效的根本原因。

可行解决方案（按优先级排序） #

1. 优先使用hitSlop属性

这个属性是React Native专门用来扩大触控响应区域的，不会改变元素的视觉尺寸、不会影响布局，也不会导致文本截断，完全适配你的需求。
直接给绑定了onPress的子Text组件添加hitSlop配置即可，示例：

<Text 
  onPress={this.performAction.bind(this)} 
  style={styles.sourceText}
  hitSlop={{top: 8, bottom: 8, left: 6, right: 6}}
>
  [<Text style={{color: 'blue'}}>{sourceId}</Text>]
</Text>

hitSlop的数值可以根据实际需要调整，数值越大触控范围越大。

2. 使用透明边框扩大点击区域

如果你使用的React Native版本较低不支持Text组件的hitSlop属性，可以给可点击子Text添加透明边框变相扩大点击范围，视觉上不会有任何变化，也不会影响行内排版：

<Text 
  onPress={this.performAction.bind(this)} 
  style={[styles.sourceText, {
    borderWidth: 6,
    borderColor: 'transparent'
  }]}
>
  [<Text style={{color: 'blue'}}>{sourceId}</Text>]
</Text>

3. 替换为行内Touchable组件

如果需要更大的触控范围，可将可点击区域替换为TouchableOpacity，React Native 0.71及以上版本支持将Touchable组件嵌套在Text内部实现行内展示：

<Text style={styles.textStyle}> 
  {this.paragraphTextHere()}
  <TouchableOpacity 
    onPress={this.performAction.bind(this)}
    style={{
      paddingHorizontal: 4,
      paddingVertical: 2,
      alignSelf: 'center'
    }}
  >
    <Text style={styles.sourceText}>
      [<Text style={{color: 'blue'}}>{sourceId}</Text>]
    </Text>
  </TouchableOpacity>
</Text>

这个方案可以通过padding自由调整触控范围，适配性更强。

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