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

样式表功能

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

请注意：这个答案现在已经过时了。这在 2015 年 React Native 开源之日就适用。如今，这种做法已被弃用。

“不建议与儿童一起使用，这将是一个错误 不远的将来。请重新考虑布局或使用 反而。”

请参阅文档 https://reactnative.dev/docs/images#background-image-via-nesting https://reactnative.dev/docs/images#background-image-via-nesting

您可以通过添加一个来完成此操作View在 - 的里面Image像这样：

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

样式表功能

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