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

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

基础结构

onLayout={this.onContentLayout}>

{ this.props.children }

const S = StyleSheet.create({

container: {

overflow: 'hidden'

},

content: {

position: 'absolute',

top: 0,

left: 0,

right: 0

}

})

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

这是开启动画的前提。

动画的实现

这里介绍两种方式

Animated Component

这是我常用的技巧。首先把container里面的元素用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

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

...

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

LayoutAnimation.configureNext( LayoutAnimation.Presets.easeInEaseOut )

this.setState({ height: newHeight })

注意事项

在安卓机上，需要手动开启动画：

if ( Platform.OS === 'android' ) {

UIManager.setLayoutAnimationEnabledExperimental(true)

}

踩坑

安卓下内容溢出

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

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

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

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

over