React Native Android ScrollView 去除阴影效果

最新推荐文章于 2025-01-18 22:11:16 发布
原创 最新推荐文章于 2025-01-18 22:11:16 发布 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android #ScrollView #阴影 #React Native

本文介绍如何在React Native的Android平台上移除ScrollView滚动到底部时出现的阴影效果。通过在styles.xml文件中设置overScrollMode属性为'never'，可以有效地禁用此效果。

Android 上的ScrollView 拉到尽头时会有阴影效果，需求要求去除该效果。

看了看React Native上ScrollView的文档，发现bounce这类有点关系的属性都是ios的，没有android上相关的设置。

在StackOverFlow找到了解决的办法。因为RN是调用的原生的控件，所以在android文件中设置scrollView相关属性就能起作用了。具体为在styles.xml中添加overScrollMode设置

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:overScrollMode">never</item>
</style>

React Native之ScrollView控件详解
xiangzhihong8的专栏
12-17 2万+
概述ScrollView在Android和ios原生开发中都比较常见，是一个 滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中 ，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。 所以，要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所
解决ScrollView中填充内容上下会有阴影的问题
weixin_34010566的博客
01-24 150
1 ImageView设置android:adjustViewBounds="true"此属性 2 ScrollView设置android:fadingEdge="none"或者代码中设置ScrollView.setHorizontalFadingEdgeEnabled(false); 3 android:fillViewport="true"   三种方法我还没有解决问题，悲剧。继续找原...
react native踩坑日记（4）：react native 中设置阴影，渐变
琞、小菜
06-23 776
推荐两个组件还是蛮好用的，具体怎么用我就不会多介绍了，看文档就可以了。有什么问题可以留言一起探讨一下。 import LinearGradient from 'react-native-linear-gradient'; // 渐变 import {BoxShadow} from 'react-native-shadow'; // 阴影 这个阴影是生成一个阴影区域，放在需要阴影元素的下方，个人感觉还是没有css的那种阴影友好 ...
react-native加阴影
qq_34823218的博客
06-04 4296
一 RN自带阴影 RN提供了阴影样式属性，但其仅支持ios平台，在Android中需要使用elevation属性实现，但elevation仅提供一个灰色阴影，视觉效果不好。 部分源码 shadowColor: "#000", shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 5, 二 react-native-shadow react-nati...
Android 去除Button默认阴影效果并添加自定义阴影
孟凡涛 的博客
06-20 5386
1、首先先说一下默认的阴影效果 // Java setStateListAnimator(null); // xml android:stateListAnimator="@null" 2、自定义阴影实现的方式有很多种 a、将Button分层，将两层的背景区分开就OK，但是有个问题时，如果Button含有内容，比如文字、图片就会影响居中效果，毕竟这种方法的原理就是四个方位的偏移 b、这...
React Native之阴影效果
大灰狼的小绵羊哥哥的博客
01-02 4406
前言 阴影效果在App中是一个很常见的需求，在css3中可有直接通过box-shadow属性实现，RN中的iOS端也可以通过下面类似的代码实现 //只支持iOS端 shadowColor: '#999', //设置阴影色 shadowOffset:{width:0,height:0}, //设置阴影偏移,该值会设置整个阴影的偏移，width可以看做x,height...
React Native Spring ScrollView V2是一个用于React Native的高性能跨平台原生ScrollView滚动。（iOS和Android）-JavaScript开发
05-26
React Native Spring ScrollView！React Native Spring ScrollView V2是用于React Native的高性能跨平台原生ScrollView。（iOS和Android）很容易支持拉动刷新和拖动以加载更多数据。 React Native Spring ScrollView...
ReactNative进阶（二十五）：ScrollView 滚动视图组件详解_react native scrollview
最新发布
2501_90225735的博客
01-18 414
【代码】ReactNative进阶（二十五）：ScrollView滚动视图组件详解_reactnativescrollview。
React Native 的动画 ScrollView 标头
06-08
React Native ScrollView Header 用于 React Native 安装的动画 ScrollView Header $ npm install react-native-scrollview-header 或 $ yarn add react-native-scrollview-header 用法 import React from 'react' ...
react-native-rebound-scrollview ★12 - React Native Android ReboundScrollView 实现。
06-08
React Native ReboundScrollView 支持android 反弹ScrollView，兼容ios -- 使用react scrollview 用法##Android 在android/setting.gradle ... include ':app',':ReboundScrollView' project(':ReboundScrollView')....
React Native阴影框效果实现
hahahhahahahha123456的博客
05-10 2480
React Native实现阴影框方法如下图，下面分别对其进行讨论： RN阴影实现.png RN自带阴影 RN提供了阴影样式属性，但其仅支持ios平台，在Android中需要使用elevation属性实现，但elevation仅提供一个灰色阴影，视觉效果不好。 react-native-shadow react-native-shadow插件是广为使用的一种阴影插件，ios于Andr...
删除android ScrollView边界阴影方法
tony_chen的专栏
08-02 9889
方法一： 在xml中添加：android:fadingEdge=”none” 方法二： 代码中添加：ScrollView.setHorizontalFadingEdgeEnabled(false);
Andriod React Native 样式表中可用样式属性
热门推荐
区长的专栏
11-24 2万+
写了这么多篇Android React Native的博文，基本上把复杂的东西都搞定了，接下来来看看一些轻松的东西，和布局有关，就是css样式，那么一个View可以设置哪些css样式呢，是和web中的css样式完全一样呢，还是有所不同呢？其实你只要在样式表中书写一个不存在的样式，就会报一大堆错，提示你该样式不存在，然后提供所有可用的样式给你，如图下面的样式就是样式表中所有可用的属性。"alignIt
React Native View 组件通过阴影渲染实现组件浮现效果
李浩然的专栏
03-27 7100
eveation 是Android 平台都有的样式键，它是数值类型的样式键，通过在组件的周围渲染阴影效果，让用户产生组件浮现在手机上的效果。 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; expor
ScrollView回弹效果
m107119232的专栏
11-02 2437
package com.zhonghong.settings.view;import com.zhonghong.sdk.android.ZHAppSdk;import android.content.Context; import android.content.Intent; import android.graphics.Rect; import android.os.Handler; imp
android ScrollView边界阴影方法
Hi, Sun
06-10 577
删除android ScrollView边界阴影方法  (2012-06-05 20:39:02) 转载▼ 标签：  删除   android   scrollview   边界   阴影   方法   it 分类： java/vb/Android XML文件中添加以下方法： android:fadingEdge=”no...
webView去掉滚动条
weixin_34228662的博客
06-09 1360
2019独角兽企业重金招聘Python工程师标准>>> ...
RN中ScrollView的属性及方法介绍
liulei21的专栏
11-08 4529
一个封装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。可以在里面设置样式， 首先是ScrollView底部不能显示的问题，在之前的博客中也说过，可以查看下， horizontal={true} 默认为false，此属性为true是表示为横向滚动 alwaysBounceVertical 此属性为true时垂直内容比滚动试图小时也可以弹性的拉动一截，...
React Native 之 Text 文字添加阴影效果
李浩然的专栏
03-30 5813
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Image, Text, TouchableHig
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值