RN填坑----iOS给控件设置背景图片无效

原创 2016年05月30日 12:10:32

React Native中,想要给某些控件设置图片,一般采用控件嵌套的方式来实现,例如:

<Image source={require('./img/my_icon.png')} >
       <Text style={{color:'red'}}>下面是背景图   </Text>
</Image>

效果如下:


但iOS用户却发现,同样的代码,跑出来的效果却不尽相同:

(我这里使用不同的背景图)


这里会发现,text默认的白色背景色会把图片部分遮盖掉


解决方法:

给Image添加一个透明背景颜色


效果如下:




版权声明:本文为博主原创文章,未经博主允许不得转载。

React-Native 如何将图片作为页面的背景以及控件的嵌套实现启动应用

转载请标明出处:http://blog.csdn.net/u010046908/article/details/50781360 本文出自:【李东的博客】最近一直非常的关注react-native的开...
  • u010046908
  • u010046908
  • 2016年03月04日 20:06
  • 17238

RN组件 - Image图片

Image,通过这个组件可以展示各种各样的图片,而且在React Native中该组件可以通过多种方式加载图片资源。 一、Image组件的基本用法 1.1 从当前项目中加载图片...
  • jyt199011302
  • jyt199011302
  • 2017年02月07日 16:35
  • 3020

RN颜色

转自官网: 以下这些格式的颜色代码都是支持的: '#f0f' (#rgb)'#f0fc' (#rgba)'#ff00ff' (#rrggbb)'#ff00ff00' (#rrggbbaa)'rg...
  • jyt199011302
  • jyt199011302
  • 2017年02月07日 17:15
  • 404

《React-Native系列》RN组件之Text和TextInput以及注意要点

今天把写的RN程序从iOS上迁移到Android上,发现了一些问题,主要涉及到Text和TextInput这两个组件,所以用一节来专门记录下来。 Text组件 我们先来看官网给的例子: [ja...
  • sinat_17775997
  • sinat_17775997
  • 2016年12月18日 16:44
  • 1340

IOS与React Native混编,将RN框架使用CocoaPods集成到原生项目中

1, 用Xcode创建一个iOS项目2, 我们在RN-IOS 项目目录建一个package.json文件,用于初始化React-native。 //{ “name”: “AwesomeProjec...
  • hbblzjy
  • hbblzjy
  • 2017年02月03日 11:21
  • 1840

iOS->RN实战分享之基础篇:在现有项目中使用RN

首先:这是一篇实战分享,但这里的内容主要来自于http://facebook.github.io/react-native/releases/0.34/docs/integration-with-ex...
  • openglnewbee
  • openglnewbee
  • 2017年02月21日 11:13
  • 2766

手把手教你iOS如何调用React Native,即是iOS与RN的交互,将推送数据传递RN

疑惑:不了解RN怎么办,没事,RN代码自有前端人员写。。 介绍:至于RN的介绍这里不多说了,,就为什么会出现iOS与RN的交互场景,这里阐述下。。RN出现的目的就是1.能快速迭代产品  2.有原生的用...
  • horisea
  • horisea
  • 2017年01月07日 18:16
  • 3675

RN-常用第三方组件

调用系统打电话、发短信、发邮件、打开网址功能 https://github.com/anarchicknight/react-native-communications 快速检索列表(按首字母...
  • sinat_17775997
  • sinat_17775997
  • 2017年04月20日 22:02
  • 2359

配置RN的开发环境

一、环境需求   1.1安装Homebrew            Homebrew是OS X的套件(包)管理器,我们可以通过它获取并且安装很多组件。   安装方式:           ru...
  • lvchenqiang_
  • lvchenqiang_
  • 2016年09月24日 17:46
  • 1876

RN部署热更新学习

React Native应用部署/热更新-CodePush最新集成总结(新) 本文出自《React Native学习笔记》系列文章。  了解更多,可以关注我的GitHub和加入:  Reac...
  • u013475663
  • u013475663
  • 2017年04月24日 11:39
  • 1019
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:RN填坑----iOS给控件设置背景图片无效
举报原因:
原因补充:

(最多只允许输入30个字)