Flexbox在圖像內部定位文字

Question

我正在使用React Native並嘗試創建特定佈局。

我有一個圖像，垂直&水平居中（在一個視圖內）和一些文字頂部的圖像也垂直&水平居中。文本需要放在圖像/背景圖像的頂部，因此我把它放在圖像標籤內。

現在，該文本的內容可能會很長，因爲它位於圖片標記中，所以它會進行換行。

我該如何做到這樣，文本內的內容不會換行，仍然在圖像的頂部？

我至今佈局：

佈局我試圖實現

我的代碼：

<TouchableHighlight onPress={onPress}> 
    <View style={styles.categoryContainer}> 
    <View style={styles.leftContainer}> 
     <View style={styles.categoryIndexContainer}> 
     <Text style={styles.categoryIndex}>01</Text> 
     </View> 
    </View> 
    <View style={styles.middleContainer}> 
     <Image source={img} style={styles.categoryImage}> 
     <Text style={styles.categoryName}>Some very long title name</Text> 
     </Image> 
    </View> 
    <View style={styles.rightContainer}></View> 
    </View> 
</TouchableHighlight> 

const styles = StyleSheet.create({ 
    categoryContainer: { 
    flexDirection: 'row', 
    }, 
    leftContainer: { 
    width: 50, 
    paddingLeft: 15, 
    paddingTop: 30, 
    }, 
    middleContainer: { 
    alignItems: 'center', 
    justifyContent: 'center', 
    flex: 1, 
    flexDirection: 'row', 
    }, 
    rightContainer: { 
    width: 50, 
    }, 
    categoryName: { 
    color: '#ffffff', 
    fontWeight: 'bold', 
    fontSize: 40, 
    textAlign: 'center', 
    backgroundColor: 'transparent', 
    flexWrap: 'nowrap', 
    }, 
    categoryImage: { 
    alignItems:'center', 
    justifyContent:'center', 
    flexWrap: 'nowrap', 
    }, 
}) 

感謝

Answer 1

您應該categoryName風格指定：position: 'absolute'然後設置top，left，right，bottom屬性，直到您將Image以上Text。