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

发布时间：2020-12-15 06:31:23 所属栏目：百科来源：网络整理

导读：在我的React Native测试中，我试图在图像的顶部渲染一个带有白色文本的块。但是，我的图像顶部有一个黑色块，其中有白色文字。不是我预期的如何渲染具有透明背景的文本块？当前结果渲染功能 render: function(){ return ( View style={styles.container} I

在我的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)',color: 'white'
  }
});

您可以通过在图像中添加视图来完成此操作：

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,backdropView: {
    height: 120,},color: 'white'
  }
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!