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

您可以將 alignself 樣式用於 TouchableOpacity

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