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 style={{flex:1,backgroundColor:'red'}}><Text onPress={()=>{this.closeControlPanel()}} style={{fontSize:100}}>抽屜的內容</Text></View>}
>
<View style={{flex:1,backgroundColor:'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);