2017-08-09 15 views
0

背景画像の「前面レイヤー」にsvg画像をレンダリングしたい。反応ネイティブの背景イメージの前面に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', 
    } 
}); 

画像が表示されないのはなぜ?私は反応ネイティブを使用しています。

+0

:1。 styles.contentへ – lukaleli

答えて

0

おそらくフレックス追加しようマップコンポーネント上にテキストを追加することと同様の問題を有し、それは(この場合、マップ)バック要素にz-index: -1を添加することにより解決した

関連する問題