Question

我使用react-native-router-flux在场景之间导航。我有四页，我想用单个抽屉菜单组件制作主题。这是我的代码一切正常但导航组件重新渲染，因为每个场景都有自己的抽屉组件。这里是react-native-router flux 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;

Answer 1

您应该只创建一个抽屉组件并为其添加场景。像这样：

    <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>

如何在react-native-router-flux中为多个场景制作抽屉？

1 个答案: