如何在react-native-router-flux中为多场景实现共用抽屉组件？

我懂你的痛点——现在每个页面都单独套了一个Drawer，这就导致每次切换页面都会重新渲染抽屉组件，完全没必要。咱们只需要把所有需要抽屉导航的页面都放到同一个父级Drawer下面，就能实现单个抽屉组件统管所有页面的效果，彻底解决重复渲染的问题。

问题根源分析 #

你当前的代码里，每个Scene都被独立的Drawer包裹，意味着Scene1到Scene4各自拥有自己的抽屉实例，切换页面时这些抽屉都会重新创建和渲染，既浪费性能又增加了冗余代码。

修改后的解决方案代码 #

/** * 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作为所有需要抽屉导航页面的父容器 */}
          <Drawer 
            hideNavBar={false} 
            key="mainDrawer" 
            drawerImage={Images.menuIcon} 
            contentComponent={Navigation} 
            drawerWidth={styles.drawerWidth}
            drawerPosition="right" // 统一设置抽屉位置，个别页面需要修改可以单独在Scene里配置
          >
            {/* 所有需要抽屉的页面都放在这个Drawer内部 */}
            <Scene 
              key="scene1" 
              component={Scene1} 
              navigationBarStyle={styles.navigationBarStyle} 
              navBarButtonColor={styles.navBarButtonColor} 
              title={strings.scene1} 
              titleStyle={styles.titleStyle} 
              initial // 设置为Drawer内的初始页面（当从启动页跳转过来时默认进入这个页面）
            />
            <Scene 
              key="scene2" 
              component={Scene2} 
              navigationBarStyle={styles.navigationBarStyle} 
              navBarButtonColor={styles.navBarButtonColor} 
              title={strings.scene2} 
              titleStyle={styles.titleStyle} 
              back 
              renderBackButton={renderBackButton} 
            />
            <Scene 
              key="scene3" 
              component={Scene3} 
              navigationBarStyle={styles.navigationBarStyle} 
              navBarButtonColor={styles.navBarButtonColor} 
              title={strings.scene3} 
              titleStyle={styles.titleStyle} 
              back 
              renderBackButton={renderBackButton} 
            />
            <Scene 
              key="scene4" 
              component={Scene4} 
              navigationBarStyle={styles.navigationBarStyle} 
              navBarButtonColor={styles.navBarButtonColor} 
              title={strings.giftCards} 
              titleStyle={styles.titleStyle} 
              back 
              renderBackButton={renderBackButton} 
            />
          </Drawer>
        </Scene>
      </Router>
    );
  }
}
export default Routes;

关键修改点说明 #

1. 统一抽屉容器：只创建一个Drawer组件，把Scene1到Scene4都放到这个抽屉内部，这样所有页面共享同一个抽屉实例，不会重复渲染。
2. 调整初始页面：在Drawer内部的scene1上添加initial属性，确保从启动页跳转后默认进入这个页面；启动页仍然单独放在Drawer外面，符合业务逻辑。
3. 统一抽屉配置：把抽屉的通用配置（比如drawerImage、drawerWidth、drawerPosition）都放在父Drawer上，子Scene会自动继承这些配置；如果某个页面需要特殊配置（比如抽屉位置改左边），可以在对应的Scene上单独覆盖属性。
4. 修复冗余key：原代码里scene3的key写错成了scene2，我已经帮你修正为scene3，避免路由冲突。

额外提示 #

• 如果需要从启动页跳转到抽屉内的页面，直接用Actions.scene1()即可，路由会自动处理抽屉的上下文。
• 如果某个页面不需要显示抽屉图标，可以在对应的Scene上添加drawerImage={null}来覆盖父Drawer的配置。

内容的提问来源于stack exchange，提问作者Shubham