小编Ste*_*lin的帖子

渲染文本框与透明背景在React Native iOS中的图像顶部

我正在尝试在我的React Native测试中在图像上渲染一个带有白色文本的块.但相反,我在我的图像上面有一个黑色的块,里面有白色文字.不是我所期待的.如何渲染透明背景的文本块?

目前的结果

在此输入图像描述

渲染功能

render: function(){
  return (
    <View style={styles.container}>
      <Image 
        style={styles.backdrop} 
        source={{uri: 'https://unsplash.com/photos/JWiMShWiF14/download'}}>
          <Text style={styles.headline}>Headline</Text>
      </Image>
    </View>
  );
)
Run Code Online (Sandbox Code Playgroud)

样式表功能

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#000000',
    width: 320
  },
  backdrop: {
    paddingTop: 60,
    width: 320,
    height: 120
  },
  headline: {
    fontSize: 20,
    textAlign: 'center',
    backgroundColor: 'rgba(0,0,0,0)',
    color: 'white'
  }
});
Run Code Online (Sandbox Code Playgroud)

ios react-native

33
推荐指数
3
解决办法
5万
查看次数

标签 统计

ios ×1

react-native ×1