ReactNative全屏圖片背景技巧

找了好幾個地方的資料,發現這種方式,很是靠譜。
傳送門: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)',
  }
});
相關文章
相關標籤/搜索