Как использовать компонент DrawerLayoutAndroid для создания ящика в приложениях с реакцией?

Эй, ребята, я новичок в том, чтобы реагировать на собственные силы, пытаясь построить ящик для гамбургеров, чтобы помочь в навигации, но не смог найти правильную документацию. Я нашел один, но это было с сокращением, поэтому я отпустил его. Может ли кто-нибудь помочь мне создать drawerlayout для реагирующих приложений. Заранее спасибо.

    Вы можете обратиться за помощью из примера ниже: Ваша панель инструментов.js может быть такой:

    'use strict'; import React, { Component } from 'react'; import { StyleSheet, View, Text } from 'react-native'; var ToolbarAndroid = require('ToolbarAndroid'); class MyToolbar extends Component { render() { var navigator = this.props.navigator; return ( <ToolbarAndroid title={this.props.title} navIcon={require('./icons/ic_menu_white_24dp.png')} style = {styles.toolbar} titleColor={'white'} onIconClicked={this.props.sidebarRef}/> ); } const styles = StyleSheet.create({ //define your own style } }); module.exports = MyToolbar; 

    А для реализации ящика:

     'use strict'; import React, { Component } from 'react'; import { StyleSheet, View, Text, Navigator, TouchableHighlight, TouchableOpacity, DrawerLayoutAndroid, ScrollView, } from 'react-native'; var ToolbarAndroid = require('ToolbarAndroid'); var MyToolbar = require('./MyToolbar'); var MenuItem = require('./MenuItem'); class OpenDraweFromToolbar extends Component { render() { var navigationView = ( <ScrollView> <View style = {{height:100, backgroundColor:'blue', justifyContent:'center'}}> <Text style = {{height:25, color:'white', fontSize:25, marginLeft:20}}>Welcome To ReactNative</Text> </View> <ListView //render your list items </ScrollView> ); return ( <DrawerLayoutAndroid drawerWidth={300} drawerPosition={DrawerLayoutAndroid.positions.Left} renderNavigationView={() => navigationView} ref={'DRAWER'}> <MyToolbar style={styles.toolbar} title={'Calendar'} navigator={this.props.navigator} {sidebarRef={()=>this._setDrawer()}}/> <View style={{flex: 1, alignItems: 'center'}}> <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text> </View> </DrawerLayoutAndroid> ); } _setDrawer() { this.refs['DRAWER'].openDrawer(); } } const styles = StyleSheet.create({ //your own style implementation }); module.exports = OpenDraweFromToolbar; 

    Вы должны передать метод открытия drawerlayout в качестве реквизита панели инструментов, а в компоненте панели инструментов вы должны вызвать sidebarRef как реквизиты, которые автоматически вызывают метод открытия drawerlayout предыдущего OpenDraweFromToolbar.js.

    Я надеюсь, что вы получите помощь от вышеуказанного образца. Хорошее кодирование !!!

    Intereting Posts
    Сохранить base64 строку как изображение с помощью phonegap? 3.2 проблема установки платформы sdk. "Готово. Ничего не было установлено " Имитация кнопки питания для отображения диалогового окна выключения Как получить имя и фамилию в андроиде? GetLoaderManager (). InitLoader () не принимает аргумент «this», хотя класс (ListFragment) реализует LoaderManager.LoaderCallbacks <Cursor> Корреляция между использованием памяти процессами и потреблением батареи Android Эквивалент iOS NSNotificationCenter в Android? Как создать XWalkWebResourceResponse? Низкая производительность glTexSubImage2D на Nexus 10 / Android 4.2.2 (Samsung Exynos 5 w / Mali-T604) Изменение ориентации Bluestack: портретный / альбомный режим Остановка фоновой службы из уведомления Монетный двор: ошибка установки genymotion Android espresso test NavigationView AndroidStudio: не удалось синхронизировать инструменты установки сборки Является ли плохой практикой или грубым делать ContentResolver.setMasterSyncAutomatically в приложении для Android?