找了好幾個地方的資料,發現這種方式,很是靠譜。
傳送門:HOW TO SET A FULL-SCREEN BACKGROUND IMAGE IN REACT NATIVE
惋惜文章中並未直接亮出代碼,僅放了視頻,不過視頻演示的還算是細緻。
這個是國外網站,因此因爲網絡緣由,等了許久纔看完。
我在此處作一個總結,備忘,同時但願也能幫助到和我碰到同樣問題的人:
一、Image做爲root進行renderreact
render() { return ( <Image source={require('./assets/images/isolate/loginBg.png')} style={styles.backgroundImage} /> ); }
二、style以下:react-native
const styles = StyleSheet.create({ backgroundImage:{ flex:1, alignItems:'center', justifyContent:'center', width:null, height:null, //不加這句,就是按照屏幕高度自適應 //加上這幾,就是按照屏幕自適應 //resizeMode:Image.resizeMode.contain, //祛除內部元素的白色背景 backgroundColor:'rgba(0,0,0,0)', } });