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

Question

在我的 React Native 测试中，我试图在图像顶部呈现一个带有白色文本的 block 。但相反，我在我的图像顶部得到了一个黑色 block ，里面有白色文本。不是我所期望的。如何渲染具有透明背景的文本 block ？

当前结果

渲染函数

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

Answer 1

请注意:这个答案现在已经过时了。这适用于 React Native 在 2015 年开源的那一天。今天这种做法已被弃用。

"Using with children is deprecated and will be an error in thenear future. Please reconsider the layout or use instead."

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

样式表函数

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