react-native - React Native - 带有内联文本的 hitSlop 的内联可压组件

Question

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

这是我尝试过的:

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 .

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

有什么想法吗？谢谢。

附录:我忘了提到，在 Android 上，您不能将 View(TouchableOpacity 继承)作为 Text。它适用于 iOS 但不适用于 Android，这是 Not Acceptable 。

Answer 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',
  }
});