【轉】ReactNative全屏圖片背景技巧

之前作Cell定制,以Image為背景,遇到此問題。搜索良久..
今轉載留存,供大家參考

傳送門:HOW TO SET A FULL-SCREEN BACKGROUND IMAGE IN REACT NATIVE

1、Image作為root進行render

render() {
    return (
      <Image source={require('./assets/images/isolate/loginBg.png')} style={styles.backgroundImage} />
    );
  }

2、Image.style如下

const styles = StyleSheet.create({
  backgroundImage:{
    flex:1,
    alignItems:'center',
    justifyContent:'center',
    width:null,
    width:null,
    //不加這句,就是按照屏幕高度自適應
    //加上這幾,就是按照屏幕自適應
    //resizeMode:Image.resizeMode.contain,
    //祛除內部元素的白色背景
    backgroundColor:'rgba(0,0,0,0)',
  }
});
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 持續更新中...... 一套企業級的 UI 設計語言和 React 實現。 https://mobile.ant....
    日不落000閱讀 5,791評論 0 35
  • afinalAfinal是一個android的ioc,orm框架 https://github.com/yangf...
    passiontim閱讀 15,489評論 2 45
  • 在西安工作,一直有心想把漢唐的帝陵都逛一遍,今天周日,雨后新晴,開車來逛逛茂陵。 茂陵是漢武帝的陵寢,不多...
    牽牛花的種子閱讀 1,836評論 0 1
  • 昨天是教師節,往年的這一天,大概算得上是全年最有職業幸福感的一天。但那時對教師這個崗位,并沒有更多的體會。只單...
    Miss姚閱讀 239評論 0 1
  • 文/徐徐來 翻開木子給我遞的結婚請柬時,我的驚訝是表現在臉上的,竟然不是木子深愛的五年的他,而是一個相親認識的對象...
    徐徐來閱讀 29,823評論 297 1,172