React Native - 内联 pressable 组件与文本的 hitSlop 对齐

Question

React Native - 内联 pressable 组件与文本的 hitSlop 对齐

3

一个客户想要在React Native应用程序中的一个段落中添加可点击的内联文本。问题是我不能在

- Kevin

你最终解决了吗？在Android上，实际上可以将TouchableWithoutFeedback放置在Text元素中。https://snack.expo.io/rJWVzXKbS TouchableOpactiy可能不起作用，因为它实际上会转换为Animated.View。但即使是这样，由于其他文本元素捕获了触摸事件，hitSlop也无法在其周围工作。 - Christopher Reid

我无法想出一个好的解决方案。你的解决方案没有崩溃，但也不是内联的。 - Kevin

好的，如果您不再关心hitSlop属性，您可以直接在Text元素上使用onPress。当我在snack模拟器中查看此代码时，它似乎是内联的，也许在实际项目中会有所不同？ - Christopher Reid

是的，我的兴趣在于同时获取内联和扩展到非可按文本的hitSlop。我可以单独获取其中任何一个。 - Kevin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tyler · Accepted Answer

您的原始解决方案非常接近。它不能正常工作的原因是 flexWrap 会将整个元素(View 或 Text)保持在一起，而不是在最近的单词处换行。

为了解决这个问题，您可以通过拆分长文本字符串并为每个单词创建一个单独的 TouchableOpacity 来绕过此问题。这样，flexWrap 就会像普通的单词换行一样运作。

以下是 Snack的链接。

const touchableText = 'ut aliquip ex ea commodo consequat.';
const loremText = '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 ut aliquip ex ea commodo consequat.';
const ipsumText = '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.';

export default () => (
  <View style={styles.container}>
    <CompoundText text={loremText} />
    <CompoundTextLink text={touchableText} />
    <CompoundText text={ipsumText} />
  </View>
);

const CompoundText = ({text}) => 
  text.split(' ').map(word => <Text>{word} </Text>);

const CompoundTextLink = ({ text }) => 
  text.split(' ').map(word => <TextLink word={word} />);

const TextLink = ({ word }) => (
  <TouchableOpacity
    hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
    onPress={() => Alert.alert('howdy')}
    style={styles.zIndex1}
  >
    <Text style={styles.buttonText}>{word} </Text>
  </TouchableOpacity>
);

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