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

原创
2018/11/29 14:37
阅读数 5.7K

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

展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部