2017-01-12 3 views
0

ネイティブ反応させ:表示する画像をフルスクリーンでネストされたコンポーネント

<Component1> 
    <Component2> 
    <Component3> 
     <Image 
     .... 
     > 
    </Component3> 
    </Component2> 
<Component1> 

コンポーネント1とCOMPONENT2は、いくつかの高さを有するように、私はコンポーネントの階層を持っています。

親コンポーネントの高さに関係なく、高さがそれぞれ3つのコンポーネントにネストされたイメージをフルスクリーンで表示するにはどうすればよいですか?

イメージにflex:1を指定すると、イメージはフルスクリーンで表示されますが、Component3のflexboxで調整されます。

現在、私のイメージのスタイルは次のとおりです。

image: { 
     position: 'absolute', 
     top: 0, 
     left: 0, 
     right: 0, 
     bottom: 0, 
    }, 

やサイズ変更モードを 'カバー'

そのコンテナ(Component3)スタイルに設定されています:

container: { 
     alignItems: 'center', 
     justifyContent: 'center', 
    }, 
+0

ちょっと考えて、モーダルは、フルスクリーンで画像を表示するためにも使用できますか? – Sood

答えて

1
const styles = StyleSheet.create({ 
     bgImageWrapper: { 
      position: 'absolute', 
      top: 0, bottom: 0, left: 0, right: 0 
     }, 
     bgImage: { 
      flex: 1, 
      resizeMode: "stretch" 
     }, 
    }); 

<Component1> 
    <Component2> 
    <Component3> 
     <View style={styles.bgImageWrapper}> 
     <Image style={styles.bgImage} /> 
     </View> 
    </Component3> 
    </Component2> 
<Component1> 

これをすべき作品

+0

これは私のために働いていない、それはまだ親にcontaiendになっている、あなたは答えを更新してください可能性があります。それは私の見た目です:http://i.imgur.com/hEJ6NkR.png – Noitidart

関連する問題