css - 在图像上方放置文本框

我有以下React Native代码：

        <View style={itemStyle.content}>
             <Text
                style={textIndexStyle.content}>
                {this.props.element["indexNumber"] + 1}
            </Text>

            <Image
              source={{uri: someUri}}
              style={imageStyle.content}
            />

        </View>

通过这种样式：

const imageStyle = StyleSheet.create({
    content:{
        alignSelf: 'flex-end',
        justifyContent:'flex-end',
        backgroundColor: '#7CFC00',//light green
        width: '100%',
        height: '75%',
        resizeMode: 'contain',
        flexBasis: '50%'
    }
});


const textIndexStyle = StyleSheet.create({
    content:{
        // position: 'absolute',
        // transform: ('50%', '50%'),
        alignSelf: 'flex-start',
        backgroundColor: '#ffa500',
        textAlign: 'center',
        fontSize: 20,
        fontWeight: 'bold',
        width: getPercentageOfSmallest(0.07),
        height: getPercentageOfSmallest(0.07)
    }
});

const itemStyle = StyleSheet.create({
    content:{
        flexDirection:'column',
        alignItems:'flex-start',
        justifyContent:'flex-start',
        backgroundColor: '#9400D3',//purple
        paddingRight: '10%',
        // marginTop: -50,
        width: getPercentageOfWidth(0.7),
    }
});

结果是这样的：



我希望将带有数字的橙色框放置在图像容器内（绿色背景上），而不是放在其顶部（紫色背景上）。

从注释代码中可以看出，我尝试了：


为外部容器设置负边距
使位置绝对，然后平移橙色框


但是，那没有用。

知道如何将带有文本的橙色框放在图像顶部吗？

最佳答案

尝试将文本包装在一个具有透明背景的视图中，并将其放置在图像中。

<View style={itemStyle.content}>
    <Image
      source={{uri: someUri}}
      style={imageStyle.content}>
      <View>
        <Text
            style={textIndexStyle.content}>
            {this.props.element["indexNumber"] + 1}
        </Text>
      </View>
    </Image>
</View>

关于css - 在图像上方放置文本框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46584046/