如何在React中以全屏尺寸填充圖像

Question

如何在React中以全屏尺寸填充圖像？

我看了很多博客和代碼，但他們都不適合我。

請幫幫我。

謝謝！

Answer 1

對於React-Native，您需要使用flex屬性。

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 
    } 
}); 

=================下面是網絡====================

其實React所做的只是簡單地渲染你的組件，並給你其他的好處，如容易組成你的組件。它不改變網頁工作原理的基本概念。

你能做到這樣，

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%; 
} 

希望這可以解決您的問題，並隨時提出任何問題。 ：）