Reactnative 在 React Native iOS 中的图像顶部呈现具有透明背景的文本框

发布于03月27日

在我的React Native测试中，我试图在图像上呈现一个带有白色文本的块.但相反，我在我的图片上有一个黑色的方块，里面有白色的文字.不是我所期望的.如何渲染具有透明背景的文本块？

Current result

在此处输入图像描述

Render function

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

Stylesheet function

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'
  }
});

推荐答案

PLEASE NOTE: This answer is now vastly out of date. This was applicable the day React Native was open sourced back in 2015. Today this way of doing this is deprecated.

"不推荐与子项一起使用，这将是一个错误."

See the docs https://reactnative.dev/docs/images#background-image-via-nesting

您可以通过在Image中添加View来实现这一点，如下所示:

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

Stylesheet function

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