【转】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,824评论 0 35
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,568评论 2 45
  • 在西安工作,一直有心想把汉唐的帝陵都逛一遍,今天周日,雨后新晴,开车来逛逛茂陵。 茂陵是汉武帝的陵寝,不多...
    牵牛花的种子阅读 1,880评论 0 1
  • 昨天是教师节,往年的这一天,大概算得上是全年最有职业幸福感的一天。但那时对教师这个岗位,并没有更多的体会。只单...
    Miss姚阅读 245评论 0 1
  • 文/徐徐来 翻开木子给我递的结婚请柬时,我的惊讶是表现在脸上的,竟然不是木子深爱的五年的他,而是一个相亲认识的对象...
    徐徐来阅读 29,834评论 297 1,172