Flexbox 在图像中定位文本

Question

我正在使用 React Native 并尝试创建一个特定的布局。

我有一个图像，垂直和水平居中（在视图中），图像顶部的一些文本也垂直和水平居中。文本需要位于 image/background 图片之上，因此我将其放在图片标签内。

现在该文本的内容可以很长，因为它在图像标签内，所以会换行。

我怎样才能使 Text 中的内容不会换行并仍然位于图像之上？

我目前的布局：

我正在努力实现的布局

我的代码：

<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 属性，直到您将 Text 放在 Image.

上方