一个客户想要在React Native应用程序中的一个段落中添加可点击的内联文本。问题是我不能在
flexWrap
会将整个元素(View
或 Text
)保持在一起,而不是在最近的单词处换行。TouchableOpacity
来绕过此问题。这样,flexWrap
就会像普通的单词换行一样运作。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',
}
});
hitSlop
属性,您可以直接在Text
元素上使用onPress
。当我在snack模拟器中查看此代码时,它似乎是内联的,也许在实际项目中会有所不同? - Christopher Reid