rn用Modal实现Drawer

PS：本文仅说明Modal可以用来做Drawer，并不介绍Modal的用法。

 

今天在开发的时候，想要使用Drawer。

RN原生不自带Drawer，react-native-drawer又有bug（没法显示背景层），react-native-elements只提供了Overlay，teaset不带没有ts声明文件。

奔溃了，RN的坑有点大啊。

坑都入了，至少把手头的APP做完再弃坑吧。于是决定自己写一个Drawer组件。

 

思路很简单，用绝对定位，zIndex设置一个大的数。

简单代码示意如下：

<View style={styles.backdrop}>
  <View style={styles.overlay}>
    { this.props.children }
  </View>
</View>

const styles = StyleSheet.create({
  backdrop: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    zIndex: 10000
  }
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '80%',
    height: '100%'
  }
})

结果如下：

 

诶，奇怪，为什么我设置成top:0，但却没有覆盖顶部的tabs。

难道是我的Drawer的祖先元素中存在一个position为relative，且与tabs平级的元素？

检查了一下代码，并不是。

 

回想一下写web的时候是怎么实现这个功能的。

诶，我不是用position:fixed的吗！

但是一查，发现RN中position只有absolute和fixed两个取值。

 

怪了，那react-native-elements的Overlay是怎么实现的。

于是我就看了一下react-native-elements的Overlay的源码，发现它的根元素是RN的Modal。

 

然后我把RN的Modal替换掉我的Drawer的根元素再看效果，行了！