React Native 组建之IOS和Android通用抽屉

/**

* Sample React Native App

* https://github.com/facebook/react-native

* @flow

*npm：https://www.npmjs.com/package/react-native-drawer

*github：https://github.com/root-two/react-native-drawer

*/

import React, { Component } from 'react';

import Drawer from 'react-native-drawer'

import {

AppRegistry,

StyleSheet,

Text,

View

} from 'react-native';

export default class demo extends Component {

closeControlPanel = () => {

this._drawer.close()

};

openControlPanel = () => {

this._drawer.open()

};

render() {

return (

<Drawer

side="top" //抽屉方向 top／left／right／bottom

open={false}//默认是否打开抽屉

tapToClose={true}//点击内容处 会关闭抽屉

type='displace' //抽屉出现的方式：overlay：抽屉覆盖内容 static:抽屉一只在内容后面 打开的时内容会滑动，displace：不会覆盖的 进出

openDrawerOffset={0.6} // 抽屉占整个屏幕的百分比（1-0.6=0.4）

closedDrawerOffset={0}//关闭抽屉后 抽屉在屏幕中的显示比例

styles={drawerStyles}//抽屉样式，背景色 透明度，阴影啥的

ref={(ref) => this._drawer = ref}

content={<View red'}}><Text onPress={()=>{this.closeControlPanel()}} style={{fontSize:100}}>抽屉的内容</Text></View>}

>

<View blue'}}><Text onPress={()=>{this.openControlPanel()}} style={{fontSize:30,}}>打开抽屉</Text></View>

</Drawer>

);

}

}

const drawerStyles = {

drawer: { flex:1,backgroundColor:'#000',shadowColor: '#0000ff', opacity: 0.6, shadowRadius: 3},

}

AppRegistry.registerComponent('demo', () => demo);