文档章节

React Native 折叠功能的实现及安卓踩坑笔记

一点灵犀
 一点灵犀
发布于 2018/11/29 14:37
字数 575
阅读 295
收藏 1

市面上有相应的插件 react-native-collapsible, 但它在折叠状态底部有莫名其妙的空白,且有很多bug未解决, 于是自己试着实现了一个简版。

基础结构

<View style={S.container}>
  <View style={{flex: 1}}>
    <View style={S.content}
      onLayout={this.onContentLayout}>
      { this.props.children }
    </View>
  </View>
</View>

const S = StyleSheet.create({
  container: {
    overflow: 'hidden'
  },
  content: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0
  }
})

我们需要能动态控制显示高度,会用到overflow:hidden,而默认状态是折叠的,因此,为了获取实际内容的真实高度(不固定),需加两层嵌套,以便通过onLayout方法提前得到展开后的高度。

这是开启动画的前提。

动画的实现

这里介绍两种方式

Animated Component

这是我常用的技巧。首先把container里面的元素用Animated.View封装:

<Animated.View style={{ height: this.state.height }}>
  <View style={{flex: 1}}>
    ...
  </View>
</Animated.View>

其中height初值为new Animated.Value(0),数值0表示完全折叠。

然后当展开时,给height应用动画即可:

Animated.timing(
  this.state.height,
  {
    toValue: newHeight,
    duration: this.props.duration || 300,
    easing: this.props.easing || Easing.linear
  }
).start()

这里newHeight为新的高度值,比如第一步中通过onLayout得到的真实高度。

反之亦然,折叠时,再设为0即可。

LayoutAnimation

这是从reactnativecode.com上学到的技巧,原作者不详。

这种方法不需要再次封装,代码相对简洁得多。这回我们直接在container上设置height

<View style={[ S.container, { height: this.state.height } ]}>
  ...
</View>

然后当折叠或展开时,设定动画并更新高度值:

LayoutAnimation.configureNext( LayoutAnimation.Presets.easeInEaseOut )

this.setState({ height: newHeight })

注意事项

在安卓机上,需要手动开启动画:

if ( Platform.OS === 'android' ) {
  UIManager.setLayoutAnimationEnabledExperimental(true)
}

踩坑

安卓下内容溢出

尽管设置了overflow:hidden,安卓下内容仍然会溢出一部分,然后和下方的内容层叠了,丑爆。

不能说overflow无效,但又不完全符合预期,试了多种方法包括改结构,均无效,太认人沮丧了。

为了方便调试,就加了背景色,居然好了。莫名其妙的就好了!

所以解决方法是——设定背景色。

over

© 著作权归作者所有

一点灵犀

一点灵犀

粉丝 11
博文 53
码字总数 15777
作品 1
深圳
程序员
私信 提问
React Native 环境搭建踩坑

React Native (web Android)环境搭建踩坑(真的是一个艰辛的过程,大概所有坑都被我踩了 官方文档地址 : https://facebook.github.io/react-native/docs/getting-started 选择 Building P...

大瑶的踩坑之旅
2018/08/02
0
0
react-native下遇到的坑,在这里都可以解决

React-Native android在windows下的踩坑记 坑很多,跳之前做好准备。没有VPN的同学请浏览完本文后慎行。 你需要先安装最新版本的node.js(我最后使用的是v4.1.2),前往官网下载>> 注:我win...

hqxluoyang
2015/10/27
0
0
OSC 第 129 期高手问答 —— 如何使用 React Native 实现跨平台开发

OSCHINA 本期高手问答(10月9日-10月16日) 我们请来了@boolron 为大家解答关于React Native开发实践方面的问题。 @boolron ,甘果移动iOS高级工程师,从2012年开始接触客户端开发,参与过多个...

局长
2016/10/09
7.2K
19
react-native 启动页android

最近做一个项目,要用到启动页这个来解决启动白屏,就弄了一下,虽然网上一堆教程,但是还是踩了一堆坑,现在搞出来了,记录一下 下面是插件的GitHub地址 https://github.com/crazycodeboy/...

望-惘-尣
2018/04/23
0
0
基于weex的app开发脚手架weexplus学习笔记

认识weexplus weexplus是基于weex官方的二次开发版本,weex和react native一样同属第2代跨平台技术,解决了第一代性能低下,体验不好的问题,同时保留了第一代 多平台一套代码,基于web技术栈...

kung2016
03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Nginx提供下载apk服务

有时候我们可能需要提供文件或者其他apk下载链接,通过 nginx 配置可以很简单地实现。 server {    listen 80;    server_name download.xxx.com;    root app;    locati...

Jack088
7分钟前
0
0
系统监控-与应用高度耦合的Javamelody监控工具

1. 为什么不使用Javamelody? 与应用高度耦合,需要在项目中配置相关的配置文件和引入对应的依赖jar、能监控的功能有限,主要功能如下: 系统信息 可通过pdf下载监控信息 内存、CPU、磁盘、H...

秋日芒草
7分钟前
1
0
mysql基本语句

好久没用sql了,好多都忘记了,正好昨天做题碰上,今天就回顾一下吧! 0.题目如下(以下适用mysql来解答): 1.数据准备: 在notepad++(当然你可以通过其他方式来编写)中编写sql脚本如下: 2.通...

不最醉不龟归
16分钟前
0
0
前端程序员需要具备的几个软实力,你具备了吗

有很多关于前端程序员的调侃,比如“智商很高情商却很感人,思维缜密,极客,加班严重,没有对象只能new一个……”,虽然不是所有前端程序员都是这样,但这也说明了前端程序员这个群体中存在...

智云编程
17分钟前
0
0
Golang math基本数学函数

三角函数 正弦函数,反正弦函数,双曲正弦,反双曲正弦 func Sin(x float64) float64 func Asin(x float64) float64 func Sinh(x float64) float64 func Asinh(x float64) float64 一次性返回......

Sunki
49分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部