React Native - 带有hitSlop的内联可按下组件与文本内联答案

【问题标题】：React Native - inline pressable component with hitSlop inline with textReact Native - 带有hitSlop的内联可按下组件与文本内联
【发布时间】：2020-12-11 12:55:51
【问题描述】：

客户想要 React Native 应用程序中的一段文本，其中有可按下的内联文本。问题是我不能将 hitSlop 放在 Text 上，如果我使用 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。

有没有办法在 Text 上获得一些 hitSlop？或者有没有办法让 TouchableOpacity 与其他文本内联？在任何一种情况下，hitSlop 都需要覆盖它周围的惰性文本。

有什么想法吗？谢谢。

附录：我忘了提到在 Android 上，您不能将 View（TouchableOpacity 继承）作为 Text 的子级时间>。它适用于 iOS，但不适用于 Android，这是不可接受的。

【问题讨论】：

你有没有想过这个问题？实际上可以将 TouchableWithoutFeedback 放在 Android 上的文本元素中。 snack.expo.io/rJWVzXKbSTouchableOpactiy 可能不起作用，因为它实际上转换为 Animated.View。但即便如此，hitSlop 也不能被其他文本元素包围，因为我认为它们会捕获触摸。
我无法想出一个好的解决方案。您的解决方案不会崩溃，但也不是内联的。
好吧，如果你不再关心hitSlop 属性，你可以直接在Text 元素上使用onPress。当我在零食模拟器中查看这段代码时，它似乎是内联的，也许它在实际项目中有所不同？
是的，我的兴趣是同时获得-inline 和hitSlop，它们扩展了不可压的文本。我一个人都可以。

标签： react-native flexbox

【解决方案1】：

您的原始解决方案非常接近。它不起作用的原因是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',
  }
});

【讨论】：