Question

我想在背景图像的“前层”上渲染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。

Answer 1

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

Answer 2

我有自己的组件：

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;

如何渲染svg图像在背景图像的前面反应原生？

2 个答案: