イメージをフルスクリーンで塗りつぶす方法

Question

イメージをフルスクリーンで塗りつぶすにはどうすればいいですか？

私は多くのブログとコードを見ていましたが、それらのすべてが私のために働いていません。

私を助けてください。

ありがとうございました！

Answer 1

リアクタティブネイティブの場合、フレックス属性を使用する必要があります。

var { 
    AppRegistry, 
    StyleSheet, 
    View, 
    Image 
} = React; 

var ImgComponent = React.createClass({ 
    render: function() { 
    return (
     <View style={styles.imgCtner}> 
     <Image style={styles.img} source={{uri: 'http://images/branding/googlelogo/2x/googlelogo_color_272x92dp.png![Description here][2]'}} /> 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    imgCtner: { 
    alignItems: 'stretch' 
    flex: 1, 
    }, 
    img: { 
    flex: 1 
    } 
}); 

=================以下は、Web用です====================

実際にはは単にコンポーネントをレンダリングして、コンポーネントを簡単に作成できるなどの他の利点を提供します。ウェブページの仕組みの基本的な考え方は変わりません。あなたはこの方法でそれを行うことができます

、

var ImageCtner = React.createClass({ 
    render: function() { 
     var url = '/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'; 
     return (
      <div className='full-page-image'> 
       <img src={url} /> 
      </div> 
     ); 
    } 
}); 

//render you component here... 

は、その後、あなたのスタイルファイルでは、あなたのスタイルを書き留めることができます。

.full-page-image { 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
} 
.full-page-image img { 
    width: 100%; 
    height: 100%; 
} 

これはあなたの問題を解決することができますので、お気軽にご質問ください。 ：）