{"id":500,"date":"2023-02-25T14:17:52","date_gmt":"2023-02-25T06:17:52","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=500"},"modified":"2023-04-29T20:49:02","modified_gmt":"2023-04-29T12:49:02","slug":"react-native-learning-open-source-sidebar-component-react-native-side-menu","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/02\/25\/react-native-learning-open-source-sidebar-component-react-native-side-menu\/","title":{"rendered":"React Native\u5b66\u4e60\u4e4b\u5f00\u6e90\u4fa7\u8fb9\u680f\u7ec4\u4ef6react-native-side-menu"},"content":{"rendered":"

react-native-side-menu<\/code>\u5f00\u6e90\u7ec4\u4ef6\uff1ahttps:\/\/github.com\/react-native-community\/react-native-side-menu<\/a><\/p>\n

\u5b89\u88c5\uff1anpm i react-native-side-menu --save<\/code>
\n\u4f7f\u7528\uff1aimport SideMenu from 'react-native-side-menu';<\/code><\/p>\n

<\/p>\n

\n

\u6ce8\u610f\uff1aMenu\u7ec4\u4ef6\u91cc\u9762\u4f7f\u7528 ScrollView \u5fc5\u987b\u8bbe\u7f6escrollsToTop={false}<\/code><\/p>\n<\/blockquote>\n

\u7528RN\u5b9e\u73b0\u4effQQ\u7684\u4fa7\u8fb9\u680f\u6548\u679c<\/p>\n

index.android.js<\/p>\n

\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n *\/\n\nimport React, { Component } from 'react';\nimport {\n    AppRegistry,\n    StyleSheet,\n    Text,\n    Image,\n    TouchableOpacity,\n    View,\n} from 'react-native';\n\nimport SideMenu from 'react-native-side-menu';\n\nimport Menu from '.\/Menu.js';  \/\/\u5bfc\u5165\u83dc\u5355\u7ec4\u4ef6\n\nconst uri_image_menu = 'http:\/\/image18-c.poco.cn\/mypoco\/myphoto\/20160605\/09\/17351665220160605093956066.png';\n\nexport default class HomeUI extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            isOpen: false,\n            selectedItem: 'About',\n        };\n    }\n\n    toggle() {\n        this.setState({\n            isOpen: !this.state.isOpen,\n        });\n    }\n\n    updateMenuState(isOpen) {\n        this.setState({ isOpen: isOpen });\n    }\n\n    onMenuItemSelected = (item) => {\n        this.setState({\n            isOpen: false,\n            selectedItem: item,\n        });\n    }\n\n    render() {\n        const menu = <Menu onItemSelected={this.onMenuItemSelected} \/>;\n        return (\n            <SideMenu\n                menu={menu}\n                isOpen={this.state.isOpen}\n                onChange={(isOpen) => this.updateMenuState(isOpen) }>\n                <View style={styles.container}>\n                    <Text style={styles.welcome}>\n                        Welcome to React Native!\n                    <\/Text>\n                    <Text style={styles.instructions}>\n                        To get started, edit index.android.js\n                    <\/Text>\n                    <Text style={styles.instructions}>\n                        Press Cmd+R to reload, {'\\n'}\n                        Cmd+Control+Z for dev menu\n                    <\/Text>\n                    <Text style={[styles.instructions, { color: 'red' }]}>\n                        \u5f53\u524d\u9009\u4e2d\u7684\u83dc\u5355\u662f: {this.state.selectedItem}\n                    <\/Text>\n                <\/View>\n\n                <Button style={styles.button} onPress={() => this.toggle() }>\n                    <Image\n                        source={{ uri: uri_image_menu, width: 32, height: 32, }}\n                        \/>\n                <\/Button>\n\n            <\/SideMenu>\n        );\n    }\n}\n\nclass Button extends Component {\n    handlePress(e) {\n        if (this.props.onPress) {\n            this.props.onPress(e);\n        }\n    }\n\n    render() {\n        return (\n            <TouchableOpacity\n                onPress={this.handlePress.bind(this) }\n                style={this.props.style}\n                >\n                <Text>{this.props.children}<\/Text>\n            <\/TouchableOpacity>\n        );\n    }\n}\n\nconst styles = StyleSheet.create({\n    button: {\n        position: 'absolute',\n        top: 20,\n        padding: 10,\n    },\n    caption: {\n        fontSize: 20,\n        fontWeight: 'bold',\n        alignItems: 'center',\n    },\n    container: {\n        flex: 1,\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: '#F5FCFF',\n    },\n    welcome: {\n        fontSize: 20,\n        textAlign: 'center',\n        margin: 10,\n    },\n    instructions: {\n        textAlign: 'center',\n        color: '#333333',\n        marginBottom: 5,\n    },\n});\n\nAppRegistry.registerComponent('RNAPP', () => RNAPP);<\/code><\/pre>\n
Menu.js<\/p>\n
\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n *\/\n\nimport React, { Component } from 'react';\nimport {\n    AppRegistry,\n    StyleSheet,\n    Dimensions,\n    ScrollView,\n    Text,\n    Image,\n    View,\n} from 'react-native';\n\nconst window = Dimensions.get('window');\nconst uri = 'http:\/\/uc.discuz.net\/images\/noavatar_small.gif';\n\nconst styles = StyleSheet.create({\n    menu: {\n        flex: 1,\n        width: window.width,\n        height: window.height,\n        backgroundColor: 'gray',\n        padding: 20,\n    },\n    avatarContainer: {\n        marginBottom: 20,\n        marginTop: 20,\n    },\n    avatar: {\n        width: 48,\n        height: 48,\n        borderRadius: 24,\n        flex: 1,\n    },\n    name: {\n        position: 'absolute',\n        left: 70,\n        top: 20,\n    },\n    item: {\n        fontSize: 16,\n        fontWeight: '300',\n        paddingTop: 10,\n    },\n});\n\nexport default class Menu extends Component {\n    static propTypes = {\n        onItemSelected: React.PropTypes.func.isRequired,\n    };  \/\/ \u6ce8\u610f\u8fd9\u91cc\u6709\u5206\u53f7\n\n    render() {\n        return (\n            <ScrollView scrollsToTop={false} style={styles.menu}>\n                <View style={styles.avatarContainer}>\n                    <Image\n                        style={styles.avatar}\n                        source={{ uri:uri }}\n                        \/>\n                    <Text style={styles.name}>QQ\u6635\u79f0<\/Text>\n                <\/View>\n\n                <Text\n                    onPress={() => this.props.onItemSelected('\u5173\u4e8e\u4f5c\u8005')}\n                    style={styles.item}\n                    >\n                    \u5173\u4e8e\u4f5c\u8005\n                <\/Text>\n\n                <Text\n                    onPress={() => this.props.onItemSelected('\u8bbe\u7f6e')}\n                    style={styles.item}\n                    >\n                    \u8bbe\u7f6e\n                <\/Text>\n            <\/ScrollView>\n        );\n    }\n};<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
react-native-side-menu\u5f00\u6e90\u7ec4\u4ef6\uff1ahttps:\/\/github.com\/react-nat […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163],"tags":[],"class_list":["post-500","post","type-post","status-publish","format-standard","hentry","category-react-native"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/500","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=500"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/500\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}