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

将文本框放在图像顶部

1 个答案: