react native开发第三方库（side-menu）

第三方库（react-native-side-menu）

安装方法

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

代码（project/side_meum.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={0}          //抽屉关闭状态时,显示多少宽度 默认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: 'blue',
        marginTop: 22
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

并在index.js文件中注册

import { AppRegistry } from 'react-native';
import App from './side_meum'
AppRegistry.registerComponent('wang', () =>App)

组件属性：

属性	默认值	类型	描述
menu	空的View	React.Component	一个组件
isOpen	false	Boolean	抽屉打开/关闭
openMenuOffset	屏幕宽度的2/3	Number	抽屉打开时的宽度
hiddenMenuOffset	none	Number	抽屉关闭状态时,显示多少宽度 默认0 抽屉完全隐藏
edgeHitWidth	none	Number	距离屏幕多少距离可以滑出抽屉,默认60
toleranceX	none	Number	X 轴的偏移量
toleranceY	none	Number	Y 轴的偏移量
disableGestures	false	Bool	是否禁用手势滑动抽屉 默认false 允许手势滑动
onStartShouldSetResponderCapture	none	Function	Function that accepts event as an argument and specify if side-menu should react on the touch or not. Check https://facebook.github.io/react-native/docs/gesture-responder-system.html for more details
onChange	none	Function	抽屉状态变化的监听函数
onMove	none	Function	抽屉移动时的监听函数 , 参数为抽屉拉出来的距离. 抽屉在左侧时参数为正,右侧则为负
onSliding	none	Function	Callback when menu is sliding. It returns a decimal from 0 to 1 which represents the percentage of menu offset between hiddenMenuOffset and openMenuOffset.
menuPosition	left	String	抽屉在左侧还是右侧 参数为 ‘left’/’right’
animationFunction	none	(Function -> Object)	Function that accept 2 arguments (prop, value) and return an object: - prop you should use at the place you specify parameter to animate - value you should use to specify the final value of prop
animationStyle	none	(Function -> Object)	Function that accept 1 argument (value) and return an object: - value you should use at the place you need current value of animated parameter (left offset of content view)
bounceBackOnOverdraw	true	boolean	when true, content view will bounce back to openMenuOffset when dragged further
autoClosing	true	boolean	如果为true 一旦有事件发生抽屉就会关闭