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

Question

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

Answer 1

Вы можете воспользоваться помощью ниже пример кода: Ваш toolbar.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.

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