React Native之在Android上添加阴影的实现

目录
  • 在Android上添加阴影
  • 目前有个方法
  • 总结

在Android上添加阴影

官网中明确表示在react native中阴影的样式属性shadow...都是只支持iOS的，并不支持Android。

目前有个方法

可以让Android有灰色的阴影，但是无法指定Android机上的阴影色值，只能是灰色的默认。

elevation:4   这个属性中的4是代表阴影的高度。

且这个属性添加后，不会影响iOS机上的原本的彩色的阴影颜色，只是在Android机上显示的是默认的灰色的阴影。

btnView:{
        width:170,
        alignItems:'center',
        borderRadius:20,
        height:35,
        justifyContent:'center',
        backgroundColor: Color.CMHeaderBgColor,

        //以下是阴影属性：
        shadowOffset: {width: 0, height: 5},
        shadowOpacity: 0.5,
        shadowRadius: 5,
        shadowColor: Color.CMHeaderBgColor,
        //注意：这一句是可以让安卓拥有灰色阴影
        //elevation: 4,
        zIndex: Global.isIOS() ? 1 : 0
}

补充：有两种方式，解决安卓可以实现彩色阴影的问题：

方法一：使用react-native-shadow和react-native-svg实现：

1. npm install react-native-shadow

2. npm install react-native-svg@5.1.8

备注：react-native-svg选择什么版本安装，需要根据你项目的react版本和react-native版本；图解如下：

3. react-native link react-native-svg

4.开始写样式，适合安卓和iOS的阴影，支持透明度，长度，色值的配置：

import React, {Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    ScrollView,
    Image,
    TouchableOpacity
} from 'react-native'

import {BoxShadow} from 'react-native-shadow'

export default class VideoCell extends Component {
    render = () => {
        const shadowOpt = {
            width:160,
            height:170,
            color:"#000",
            border:2,
            radius:3,
            opacity:0.2,
            x:0,
            y:3,
            style:{marginVertical:5}
        }

        return (
            <BoxShadow setting={shadowOpt}>
                <TouchableOpacity style={{
                    position:"relative",
                    width: 160,
                    height: 170,
                    backgroundColor: "#fff",
                    borderRadius:3,
                    // marginVertical:5,
                    overflow:"hidden"}}>
                    测试
                </TouchableOpacity>
            </BoxShadow>
        )
    }
}

事实证明这种方法可以实现我们想要的效果。但是这会牵扯到你的项目不能仅仅通过热更新来迭代版本；需要发app store大版本和安卓市场版本。

如有不解，可移步查看react-native-shadow官网：

https://www.npmjs.com/package/react-native-shadow

方法二：

我们可以使用阴影图作为背景图，附着上去的方法：

<Image source={require('../../content/img/bank/shadowBg.png')}
   style={{width: deviceWidth-20, height: 220, alignItems: 'center',resizeMode:Image.resizeMode.contain}}>
  <View style={styles.bankTop}></View>
</Image>

Image组件，当为单标签是图片；当未双标签是背景；

如图：可以看到有屎黄色的背景：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • React Native可定制底板组件Magic Sheet使用示例

    React Native可定制底板组件Magic Sheet使用示例

    目录 正文 如何使用它 1.安装并导入 2.基本使用方法 预览 正文 一个React Native组件,通过提供一个强制性的API,可以从应用程序的任何地方(甚至在组件之外)调用,以显示一个完全可定制的底部表单,并能够等待它解决并得到一个响应. 这个库依赖于Gorhom的/bottom-sheet 的模态组件,并接受相同的道具和儿童. 如何使用它 1.安装并导入 # Yarn $ yarn add react-native-magic-sheet # NPM $ npm i react-nati

  • React Native自定义Android的SSL证书链校验

    React Native自定义Android的SSL证书链校验

    目录 前言 HTTPS请求 WebSocket 前言 虽然这次分享的内容解决了本人的实际开发需求,但由于不是专职的Android开发工程师,涉及到的Android相关内容可能会存在错误或者写法不合理,仅供参考,请多多指教. 本文示例基于: React Native - 0.67.3 Android - 10+ 不包括iOS 由于业务原因,需要在生产环境里面使用自签发证书,那自然这个证书是无法通过Android证书链验证的,为此需要自定义校验规则. 本文分为两部分,介绍了对HTTPS请求和WebS

  • ReactNative支付密码输入框实现详解

    目录 正文 hooks版本 正文 项目中需求如果涉及钱包,支付等功能,可以大概率会用到输入密码组件,也算是个常见组件吧. 之前写过一个纯js的开源组件,使用的类的形式,也比较老了,可直接添加npm库到项目中进行使用. hooks版本 最近项目需要,又重新写了一个hooks版本的,现在直接上源码,对于不想添加依赖库的伙伴,可直接复制源码到项目中,直接使用. 'use strict'; import React, {useRef, useState} from 'react'; import {St

  • ReactNative 状态管理redux使用详解

    目录 正文 安装和配置开发环境 定义数据结构 然后创建行为处理函数 todoReducer 创建 UI 组件: 正文 有同学反馈开发 ReactNative 应用时状态管理不是很明白,接下来几篇文章我们来对比下 React 及 ReactNative 状态管理常用的几种框架的使用和优缺点. 首先来看下 redux 怎么使用. 以下是使用 React 和 Redux 创建 todo list 的一般过程,完整代码见文章末尾: 安装和配置开发环境 安装 Node.js 和 create-react-

  • 一文详解ReactNative状态管理rematch使用

    目录 引言 React 和 rematch 创建Todo List App 创建一个 models.ts 文件 创建一个 todo.ts 文件 使用 rematch 的 init 函数创建 store RematchTodoApp 要创建UI 组件 总结 引言 有同学反馈开发 ReactNative 应用时状态管理不是很明白,接下来几篇文章我们来对比下 React 及 ReactNative 状态管理常用的几种框架的使用和优缺点. 上一篇文章介绍了 redux 的升级版 redux-toolki

  • ReactNative错误采集原理在Android中实现详解

    目录 引言 1 JS错误 1.1 Error 1.2 常见的错误 SyntaxError:语法错误 ReferenceError:引用错误 TypeError:类型错误 RangeError:边界错误 URIError:URI错误 1.3 自定义错误 2 RN错误处理 2.1 JS部分 2.1.1 MessageQueue 2.1.2 ErrorUtils 2.1.3 ExceptionsManager 2.2 Native部分 2.2.1 ExceptionsManagerModule 2.2

  • 详解React Native监听Android回退按键与程序化退出应用

    详解React Native监听Android回退按键与程序化退出应用 前言 我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控android回退按键,那么在React Native中应该如何应用呢?我们具体来看看. BackAndroid 此模块用于监听硬件的back键操作. 看下具体代码: BackAndroid.addEventListener('hardwareBackPress', function() { if (!

  • React Native 中处理 Android 手机吞字的解决方案

    React Native 中处理 Android 手机吞字的解决方案

    目录 复现问题 解决问题 示例 React Native App 在部分型号的 Android 手机上,可能会发生文字显示不全的问题. 官方也有一个 相关的 Issue ,并提供了如下的解决方案: const defaultFontFamily = { ...Platform.select({ android: { fontFamily: "" }, }), } const oldRender = Text.render Text.render = function (...args)

  • react native实现往服务器上传网络图片的实例

    如下所示: let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现图片上传 * @param {string} url 接口地址 * @param {JSON} params body的请求参数 * @return 返回Promise */ function uploadImage(url,params){ return new Promise(fun

  • React Native学习之Android的返回键BackAndroid详解

    前言 最近在学习使用 React Native开发,iOS搞完,开始适配安卓,由于木有接触过安卓,所以碰到了很多问题,第一个问题,安卓的返回键BackAndroid问题, 我写了一个工具类,来搞定,其中用到了java原生代码与js交互;好吧,下面开始正式内容: 上代码: // BackAndroidTool // 功能: "安卓手机上的返回键" // Created by 小广 on 2016-05-10 下午. // Copyright © 2016年 All rights rese

  • Android原生项目集成React Native的方法

    Android原生项目集成React Native的方法

    开发环境准备 首先按照开发环境搭建教程来安装React Native在安卓平台上所需的一切依赖软件(比如npm). 在应用中添加JS代码 在项目的根目录中运行: $ npm init $ npm install --save react react-native $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig npm init创建了一个空的node模块

  • 如何在原有Android项目中快速集成React Native详解

    前言 RN经过一段时间发展,已经有充分数量的人尝试过了,就我身边就有几批,褒贬也不一: ① 做UI快 ② 还是有很多限制,不如原生Native ③ 入门简单,能让前端快速开发App ④ iOS&Android大部分代码通用 ⑤ code-push能做热更新,但是用不好依旧坑 ...... 在得到一些信息后,可以看出,要用RN高效率的做出比较不错的App是有可能的,单看投入度与最初设计是否合理,而且现在关于React Native的各种文档是相当丰富的,所以这个阶段想切入RN可能是一个不错的选择.

  • 详解React Native项目中启用Hermes引擎

    详解React Native项目中启用Hermes引擎

    目录 引言 一.启用 Hermes 引擎 1.1 Android 1.2 iOS 二.Hermes 引擎使用 2.1 检查 Hermes 引擎是否启用 2.2 绑定Hermes 2.3 使用DevTools在Hermes上调试JS 引言 目前,最新版本的React Native(0.70.0及以上版本)已经默认开启了Hermes引擎.而Hermes则是专门针对React Native应用而优化的全新JavaScript引擎,启用Hermes引擎可以优化启动时间,减少内存占用以及空间占用. 一.启

  • 基于React Native 0.52实现轮播图效果

    基于React Native 0.52实现轮播图效果

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的(Git地址) 一.总览 轮播图几乎是必备的效果,这里选择 react-native-swiper 来实现,效果如下图: 二.实现轮播图效果 1.通过npm安装react-native-swiper npm install react-native-swiper --save 2.在recommend.js引入react-native-swiper import Swiper from 'rea

  • React Native 自定义下拉刷新上拉加载的列表的示例

    在移动端开发中列表页是非常常见的页面,在React Native中我们一般使用FlatList或SectionList组件实现这些列表视图.通常列表页都会有大量的数据需要加载显示,这时候就用到了分页加载,因此对于列表组件来说,实现下拉刷新和上拉加载在很多情况下是必不可少的. 本篇文章基于FlatList封装一个支持下拉刷新和上拉加载的RefreshListView,对原始的FlatList进行封装之后,再调用上拉和下拉刷新就十分方便了. 下拉刷新的实现十分简单,这里我们沿用FlatList本身的

  • React Native与Android 原生通信的方法

    我们用React Native 做混合开发的时候免不了要原生和React Native 进行通信交互,这篇文章就是分享原生模块与JS传递数据的几种方式. 总的步骤可以分为如下几点: 在原生端定义Module类,继承ReactContextBaseJavaModule,在Module类里,定义交互的方法. 定义Package类,继承ReactPackage,将Module实例添加到集合. 在android继承的ReactApplication,回调实现getPackages方法,将Package实

随机推荐