ReactNative 抽屜組件 側邊欄 react-native-side-menu

示例圖:

安裝

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

使用

引入組件

import SideMenu from 'react-native-side-menu';

使用組件:

render() {

const menu = <Text style={{marginTop: 22}}>aaa</Text>;
    return (

        <SideMenu
            menu={menu}                    //抽屜內的組件
        >
            <View style={styles.container}>
                <Text style={styles.welcome} onPress={() => {
                    this.setState({
                        isOpen: true
                    })
                }}>
                    Open Draw!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit App.js
                </Text>

            </View>
        </SideMenu>

    );

menu 爲 抽屜內部的組件 , 展現在抽屜上的內容 .
ContentView 爲主頁面視圖 , 是抽屜關閉時頁面上展現的內容 .

組件的屬性

demo代碼

新建項目,安裝好 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,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
const {width, heihgt} = Dimensions.get('window');
type Props = {};
export default class App extends Component<Props> {

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

    render() {
        const menu = <Text style={{marginTop: 22}} onPress={() => alert('點擊了aaa')}>aaa</Text>;
        return (

            <SideMenu
                menu={menu}                    //抽屜內的組件
                isOpen={this.state.isOpen}     //抽屜打開/關閉
                openMenuOffset={width / 2}     //抽屜的寬度
                hiddenMenuOffset={20}          //抽屜關閉狀態時,顯示多少寬度 默認0 抽屜徹底隱藏
                edgeHitWidth={60}              //距離屏幕多少距離能夠滑出抽屜,默認60
                disableGestures={false}        //是否禁用手勢滑動抽屜 默認false 容許手勢滑動
                /*onStartShouldSetResponderCapture={
                    () => console.log('開始滑動')}*/
                onChange={                   //抽屜狀態變化的監聽函數
                    (isOpen) => {
                        isOpen ? console.log('抽屜當前狀態爲開着')
                            :
                            console.log('抽屜當前狀態爲關着')

                    }}

                onMove={                     //抽屜移動時的監聽函數 , 參數爲抽屜拉出來的距離 抽屜在左側時參數爲正,右側則爲負
                    (marginLeft) => {
                        console.log(marginLeft)
                    }}

                menuPosition={'left'}     //抽屜在左側仍是右側
                autoClosing={false}         //默認爲true 若是爲true 一有事件發生抽屜就會關閉
            >
                <View style={styles.container}>
                    <Text style={styles.welcome} onPress={() => {
                        this.setState({
                            isOpen: true
                        })
                    }}>
                        Open Draw!
                    </Text>
                    <Text style={styles.instructions}>
                        To get started, edit App.js
                    </Text>
                    <Text style={styles.instructions}>
                        {instructions}
                    </Text>
                </View>
            </SideMenu>

        );
    }
}


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庫連接