React Native学习之开源侧边栏组件react-native-side-menu

react-native-side-menu开源组件：https://github.com/react-native-community/react-native-side-menu

安装：npm i react-native-side-menu --save
使用：import SideMenu from 'react-native-side-menu';

注意：Menu组件里面使用 ScrollView 必须设置scrollsToTop={false}

用RN实现仿QQ的侧边栏效果

index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Image,
    TouchableOpacity,
    View,
} from 'react-native';

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

import Menu from './Menu.js';  //导入菜单组件

const uri_image_menu = 'http://image18-c.poco.cn/mypoco/myphoto/20160605/09/17351665220160605093956066.png';

export default class HomeUI extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isOpen: false,
            selectedItem: 'About',
        };
    }

    toggle() {
        this.setState({
            isOpen: !this.state.isOpen,
        });
    }

    updateMenuState(isOpen) {
        this.setState({ isOpen: isOpen });
    }

    onMenuItemSelected = (item) => {
        this.setState({
            isOpen: false,
            selectedItem: item,
        });
    }

    render() {
        const menu = <Menu onItemSelected={this.onMenuItemSelected} />;
        return (
            <SideMenu
                menu={menu}
                isOpen={this.state.isOpen}
                onChange={(isOpen) => this.updateMenuState(isOpen) }>
                <View style={styles.container}>
                    <Text style={styles.welcome}>
                        Welcome to React Native!
                    </Text>
                    <Text style={styles.instructions}>
                        To get started, edit index.android.js
                    </Text>
                    <Text style={styles.instructions}>
                        Press Cmd+R to reload, {'\n'}
                        Cmd+Control+Z for dev menu
                    </Text>
                    <Text style={[styles.instructions, { color: 'red' }]}>
                        当前选中的菜单是: {this.state.selectedItem}
                    </Text>
                </View>

                <Button style={styles.button} onPress={() => this.toggle() }>
                    <Image
                        source={{ uri: uri_image_menu, width: 32, height: 32, }}
                        />
                </Button>

            </SideMenu>
        );
    }
}

class Button extends Component {
    handlePress(e) {
        if (this.props.onPress) {
            this.props.onPress(e);
        }
    }

    render() {
        return (
            <TouchableOpacity
                onPress={this.handlePress.bind(this) }
                style={this.props.style}
                >
                <Text>{this.props.children}</Text>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    button: {
        position: 'absolute',
        top: 20,
        padding: 10,
    },
    caption: {
        fontSize: 20,
        fontWeight: 'bold',
        alignItems: 'center',
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

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

Menu.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Dimensions,
    ScrollView,
    Text,
    Image,
    View,
} from 'react-native';

const window = Dimensions.get('window');
const uri = 'http://uc.discuz.net/images/noavatar_small.gif';

const styles = StyleSheet.create({
    menu: {
        flex: 1,
        width: window.width,
        height: window.height,
        backgroundColor: 'gray',
        padding: 20,
    },
    avatarContainer: {
        marginBottom: 20,
        marginTop: 20,
    },
    avatar: {
        width: 48,
        height: 48,
        borderRadius: 24,
        flex: 1,
    },
    name: {
        position: 'absolute',
        left: 70,
        top: 20,
    },
    item: {
        fontSize: 16,
        fontWeight: '300',
        paddingTop: 10,
    },
});

export default class Menu extends Component {
    static propTypes = {
        onItemSelected: React.PropTypes.func.isRequired,
    };  // 注意这里有分号

    render() {
        return (
            <ScrollView scrollsToTop={false} style={styles.menu}>
                <View style={styles.avatarContainer}>
                    <Image
                        style={styles.avatar}
                        source={{ uri:uri }}
                        />
                    <Text style={styles.name}>QQ昵称</Text>
                </View>

                <Text
                    onPress={() => this.props.onItemSelected('关于作者')}
                    style={styles.item}
                    >
                    关于作者
                </Text>

                <Text
                    onPress={() => this.props.onItemSelected('设置')}
                    style={styles.item}
                    >
                    设置
                </Text>
            </ScrollView>
        );
    }
};