css - 将文本框放在图像顶部

Question

我有以下 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),
    }
});

结果是这样的:

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

从注释代码中可以看出，我试过:

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

然而，这并没有奏效。

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

Answer 1

尝试将您的文本包裹在 View 中(具有透明背景)并将其放置在图像中。

<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>