Как сделать ящик для нескольких сцен в react-native-router-flux?

Я использую response-native-router-flux для навигации между сценами. У меня четыре страницы, и я хочу сделать тему с одним компонентом меню ящика. Вот мой код, все работает нормально, но компонент навигации перерисовывается, потому что каждая сцена имеет собственный компонент ящика. А вот документ для потока response-native-router https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md#drawer-drawer-or-scene-drawer < / а>

/**
 * Layout Routes
 */
'use strict';

import React, { Component } from 'react';
import { TouchableOpacity } from 'react-native';
import { Router, Scene, Actions, Drawer } from 'react-native-router-flux';

// common component
import { BKImageView } from '../components/common';


// global styles
import styles from './Styles';

// localization strings
import strings from '../config/localization';

// images
import Images from '../config/images';

// layouts
import SplashScreen from './layouts/Scenes/SplashScreen'
import Scene1 from '../layouts/Scenes/Scene1';
import Scene2 from '../layouts/Scenes/Scene2';
import Scene3 from '../layouts/Scenes/Scene3';
import Scene4 from '../layouts/Scenes/Scene4';

// back button
const renderBackButton = () => (
    <TouchableOpacity onPress={() => Actions.pop()} style={{ width: 60, height: 40, justifyContent: 'space-around' }}>
        <BKImageView source={Images.backIcon} style={{ marginLeft: 10 }} />
    </TouchableOpacity>
);

// define all scenes for the app
class Routes extends Component {
    render() {
        return (
            <Router
                backAndroidHandler={() => Actions.pop()}
                sceneStyle={styles.sceneStyle}
            >
                <Scene key="root">
                    <Scene
                        key="splashScreen"
                        component={SplashScreen}
                        hideNavBar
                        initial
                    />
                    <Drawer
                        hideNavBar
                        key="scene1"
                        drawerImage={Images.menuIcon}
                        contentComponent={Navigation}
                        drawerWidth={styles.drawerWidth}
                    >
                        <Scene
                            key="scene1"
                            component={Scene1}
                            navigationBarStyle={styles.navigationBarStyle}
                            navBarButtonColor={styles.navBarButtonColor}
                            title={strings.scene1}
                            titleStyle={styles.titleStyle}
                        />
                    </Drawer>
                    <Drawer
                        hideNavBar
                        key="scene2"
                        drawerImage={Images.menuIcon}
                        contentComponent={Navigation}
                        drawerWidth={styles.drawerWidth}
                        drawerPosition="right"
                    >
                        <Scene
                            key="scene2"
                            component={Scene2}
                            navigationBarStyle={styles.navigationBarStyle}
                            navBarButtonColor={styles.navBarButtonColor}
                            title={strings.scene2}
                            titleStyle={styles.titleStyle}
                            back
                            renderBackButton={renderBackButton}
                        />
                    </Drawer>
                    <Drawer
                        hideNavBar
                        key="scene3"
                        drawerImage={Images.menuIcon}
                        contentComponent={Navigation}
                        drawerWidth={styles.drawerWidth}
                        drawerPosition="right"
                    >
                        <Scene
                            key="scene2"
                            component={Scene3}
                            navigationBarStyle={styles.navigationBarStyle}
                            navBarButtonColor={styles.navBarButtonColor}
                            title={strings.scene3}
                            titleStyle={styles.titleStyle}
                            back
                            renderBackButton={renderBackButton}
                        />
                    </Drawer>
                    <Drawer
                        hideNavBar
                        key="scene4"
                        drawerImage={Images.menuIcon}
                        contentComponent={Navigation}
                        drawerWidth={styles.drawerWidth}
                        drawerPosition="right"
                    >
                        <Scene
                            key="scene4"
                            component={Scene4}
                            navigationBarStyle={styles.navigationBarStyle}
                            navBarButtonColor={styles.navBarButtonColor}
                            title={strings.giftCards}
                            titleStyle={styles.scene4}
                            back
                            renderBackButton={renderBackButton}
                        />
                    </Drawer>
                </Scene>
            </Router>
        );
    }
}

export default Routes;

react-native react-native-router-flux
person Shubham    schedule 10.01.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны создать только один компонент ящика и добавить к нему сцены. Что-то вроде этого:

    <Scene key="root">
                    <Scene
                        key="splashScreen"
                        component={SplashScreen}
                        hideNavBar
                        initial
                    />
                    <Drawer
                        hideNavBar
                        key="main"
                        drawerImage={Images.menuIcon}
                        contentComponent={Navigation}
                        drawerWidth={styles.drawerWidth}
                    >
                        <Scene
                            key="scene1"
                            component={Scene1}
                            navigationBarStyle={styles.navigationBarStyle}
                            navBarButtonColor={styles.navBarButtonColor}
                            title={strings.scene1}
                            titleStyle={styles.titleStyle}
                        />
<Scene
                            key="scene2"
                            component={Scene2}
                            navigationBarStyle={styles.navigationBarStyle}
                            navBarButtonColor={styles.navBarButtonColor}
                            title={strings.scene2}
                            titleStyle={styles.titleStyle}
                        />
<Scene
                            key="scene3"
                            component={Scene3}
                            navigationBarStyle={styles.navigationBarStyle}
                            navBarButtonColor={styles.navBarButtonColor}
                            title={strings.scene3}
                            titleStyle={styles.titleStyle}
                        />
                    </Drawer>
person Uncaught Exception    schedule 29.05.2018