如何在本机反应的背景图像前面渲染 svg 图像？答案

【问题标题】：How to render an svg image in the front of background image on react native?如何在本机反应的背景图像前面渲染 svg 图像？
【发布时间】：2018-01-17 21:37:05
【问题描述】：

我想在背景图像的“前层”上渲染一个 svg 图像。

当视图加载时，只出现背景图像，我没有得到任何错误。图像是否甚至加载（在背景的背景下）？

这是我到目前为止所做的：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  Image,
} from 'react-native';

import SVGImage from 'react-native-svg-image';


export default class ShowScreen extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Image
        source={require('../img/image.jpg')}
        style={styles.backgroundImage}
        blurRadius={1}>

          <View style={styles.content}>
            <SVGImage
            style={{ width: 80, height: 80 }}
            source={{uri:'https://fluent-panda.appspot.com.storage.googleapis.com/dumbbell.svg'}}/>
          </View>
        </Image>
      </View>
    );
  }



const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backgroundImage: {
    flex: 1,
    alignSelf: 'stretch',
    width: null,
    justifyContent: 'center',
  },
  content: {
    alignItems: 'center',
  }
});

为什么图片没有出现？我正在使用 react-native。

【问题讨论】：

也许尝试添加 flex: 1;到styles.content

标签： image svg react-native background

【解决方案1】：

我有自己的组件可以这样做：

import React from 'react';
import { View, Image } from 'react-native';

const BackgroundImage = (props) => {

const { container, image } = styles;


return (

<View style={container}>
  <Image
  style={[image, 
    { resizeMode: props.resizeMode,    
    opacity: props.opacity}
  ]}  
  source={props.source}***strong text***
  />
</View>

)
};

const styles = {
container: {
  position: 'absolute',
  top: 0,
  left: 0,   
  width: '100%',
  height: '100%',
},
  image: {  
  flex: 1,  
}
};

export {BackgroundImage};

该组件将使用您想要的任何图像填充您的容器；）

import React from 'react';
import { View, Image } from 'react-native';

class List extends Component {
 render() {
  let source = {uri: 'http://via.placeholder.com/350x150'};
  return (
       <View style = {{backgroundColor: 'black'}>
          <BackgroundImage
           resizeMode="cover"
           opacity={0.6}
           source={source}
           />
           <View style={styles.content}>
        <SVGImage
        style={{ width: 80, height: 80 }}
        source={{uri:'https://fluent-
        panda.appspot.com.storage.googleapis.com/dumbbell.svg'}}/>
      </View>
        </View>
    )
  }
  export default List;

【讨论】：

【解决方案2】：

在地图组件上添加文本时遇到了类似的问题，通过将z-index: -1 添加到后面的元素（在本例中为地图）解决了这个问题

【讨论】：