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

Question

我的 React Native 应用程序中有一个内部TouchableOpacity有一个Text组件，我希望它的TouchableOpacity宽度与Text. 我尝试这样做：

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

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

Answer 1

您可以使用 TouchableOpacity 的alignself 样式

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