React Native：如何使 TouchableOpacity 缩小以适合文本内容？答案

【问题标题】：React Native: How to make TouchableOpacity shrink to fit Text contents?React Native：如何使 TouchableOpacity 缩小以适合文本内容？
【发布时间】：2020-09-01 21:50:46
【问题描述】：

我的 React Native 应用程序中有一个 TouchableOpacity 和一个 Text 组件，我希望 TouchableOpacity 与 Text 一样宽。我试过这样做：

<TouchableOpacity style={{flexDirection: 'row', flexBasis: 0, flexShrink: 1}}>
    <Text>text</Text>
</TouchableOpacity>

但TouchableOpacity 仍然与整个屏幕一样宽。 flexGrow 默认为 0，所以我想通过允许 TouchableOpacity 与 flexShrink 缩小并使其 flexBasis 为零，

【问题讨论】：

我刚刚尝试了您的示例，它对我有用。 Check it out
您的零食可以在网络上使用，但在 iOS 和 Android 上，文本不会出现。你也明白了吗？
@gkeenley 我的回答有帮助吗？

标签： javascript reactjs react-native flexbox react-native-flexbox

【解决方案1】：

TouchableOpacity 可以使用 alignself 样式

<TouchableOpacity style={{backgroundColor: 'red', alignSelf: 'flex-start' }}>
    <Text>text</Text>
</TouchableOpacity>

【讨论】：