React Native引出しユニット側サイドバーreact-native-side-menu

例図:
インストール

npm install react-native-side-menu --save

使用
コンポーネントを導入
import SideMenu from'react-native-side-menu'
コンポーネントを使う:
レンダー(){

    const menu = aaa;
    return (

        
            
                 {
                    this.setState({
                        isOpen: true
                    })
                }}>
                    Open Draw!
                
                
                    To get started, edit App.js
                

            
        

    );
    
    

menuは引き出しの内部のコンポーネントで、引き出しに展示されている内容です.ContentViewはホームビューで、引き出しが閉まっている時にページに展示されている内容です.
コンポーネントの属性
デモコード
新規プロジェクトは、react-native-side-menuライブラリをインストールし、APP.jsの内容を置き換えて実行すればいいです.

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Dimensions
} from 'react-native';
import SideMenu from 'react-native-side-menu';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,
' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,
' +
    'Shake or press menu button for dev menu',
});
const {width, heihgt} = Dimensions.get('window');
type Props = {};
export default class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isOpen: false
        }
    }

    render() {
        const menu =  alert('   aaa')}>aaa;
        return (

             console.log('    ')}*/
                onChange={                   //           
                    (isOpen) => {
                        isOpen ? console.log('         ')
                            :
                            console.log('         ')

                    }}

                onMove={                     //           ,                       ,     
                    (marginLeft) => {
                        console.log(marginLeft)
                    }}

                menuPosition={'left'}     //         
                autoClosing={false}         //   true    true             
            >
                
                     {
                        this.setState({
                            isOpen: true
                        })
                    }}>
                        Open Draw!
                    
                    
                        To get started, edit App.js
                    
                    
                        {instructions}
                    
                
            

        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        marginTop: 22
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

react-native-side-menuライブラリリンク