Question

客户想要在React Native应用中的一段文本，其中有可按下的内联文本。问题是我不能将 hitSlop 放在文本上，如果我使用 TouchableOpacity ，它将不会与文本内联显示-每个都是自己的街区。

这是我尝试过的：

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={ styles.text }>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </Text>

        <TouchableOpacity
          onPress={ () => Alert.alert('howdy') }
          hitSlop={ { top: 15, right: 15, bottom: 15, left: 15 } }
        >
          <Text style={ styles.buttonText }>ut aliquip ex ea commodo consequat.</Text>
        </TouchableOpacity>

        <Text style={ styles.text }>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  text: {
    flexWrap: 'wrap',
  },
  buttonText: {
    color: 'red',
  }
});

有小吃here。

是否可以在文本上获取一些hitSlop？还是有一种方法可以使 TouchableOpacity 与其他文本内联？无论哪种情况， hitSlop 都需要与包围它的惰性文本重叠。

有什么想法吗？谢谢。

附录：我忘了提到在Android上，您不能将 View （ TouchableOpacity 继承）作为 Text的子代。它可以在iOS上运行，但不能在Android上运行，这是不可接受的。

Answer 1

您可以尝试用<Text/>包装：

<Text>
  <Text>this is </Text>
  <TouchableOpacity onPress={() => { AlertIOS.alert('hi!') }}>
    <Text style={{color: '#0000ff'}}>facebook.com</Text>
  </TouchableOpacity>
  <Text> link</Text>
</Text>

从https://github.com/facebook/react-native/issues/1030#issuecomment-96435150

获得

或使用类似以下模块的内容：https://github.com/agentcooper/react-native-hypertext

Answer 2

您的原始解决方案非常接近。之所以不起作用，是因为if(-8 & 7)将整个元素（flexWrap或View）保持在一起，而不是包装在最接近的单词上。

您可以通过分割长文本字符串并为每个单词创建单独的Text来解决此问题。这样TouchableOpacity会像普通的自动换行一样。

这里是Snack

flexWrap

Answer 3

您可以只使用The max value 0.61 and Index in 2 The max value 0.79 and Index in 1 The max value 0.93 and Index in 3 The max value 0.61 and Index in 2 The max value 0.69 and Index in 3，如下所示：

TouchableWithoutFeedback

它们的行为就好像它们是一个完整的文本一样，<Text> Hello <TouchableWithoutFeedback onPress={() => console.log('onPress!')}> World </TouchableWithoutFeedback> </Text>也可以工作，但是文本距离只有几分之二。我发现TouchableOpacity的确很好用。

React Native-带有文本的hitSlop嵌入式可嵌入式组件

3 个答案: