市面上有相应的插件 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