使用 React Native Router Flux 设置的 React Native Drawer 不起作用答案

【问题标题】：React Native Drawer with React Native Router Flux set up not working使用 React Native Router Flux 设置的 React Native Drawer 不起作用
【发布时间】：2017-05-12 23:41:47
【问题描述】：

我正在尝试使用 react-native-router-flux 设置 react-native-drawer。

我已经在 Flux OTHER INFO 文档中设置了抽屉，如下所示

import React from 'react-native';
import Drawer from 'react-native-drawer';
import SideMenu from './SideMenu';
import {Actions, DefaultRenderer} from 'react-native-router-flux';

export default class NavigationDrawer extends Component {
    render(){
        const state = this.props.navigationState;
        const children = state.children;
        return (
            <Drawer
                ref="navigation"
                open={state.open}
                onOpen={()=>Actions.refresh({key:state.key, open: true})}
                onClose={()=>Actions.refresh({key:state.key, open: false})}
                type="displace"
                content={<SideMenu />}
                tapToClose={true}
                openDrawerOffset={0.2}
                panCloseMask={0.2}
                negotiatePan={true}
                tweenHandler={(ratio) => ({
                 main: { opacity:Math.max(0.54,1-ratio) }
            })}>
                <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
            </Drawer>
        );
    }
}

然后我将抽屉场景放在Router组件中，如下所示

render() {
    return (
        <Router>
            <Scene key="choice" component={ServiceChoice} title="" hideNavBar />
            // some scenes go here

            <Scene key="drawer" component={NavigationDrawer} open={false} >
                <Scene key="main" tabs={true} >
                   <Scene 
                       key="map" 
                       component={MapScreen} 
                       title="" 
                       hideNavBar 
                       initial 
                    />
                </Scene>
            </Scene>

            //some other scenes go here
        </Router>
    );
}

现在的问题是来自另一个组件，例如ServiceChoice，如果我这样做Actions.map()，什么都不会发生。

谁能指出我做错了什么？我可以提供任何其他需要的信息。所有导入也是正确的。

谢谢

【问题讨论】：

标签： android react-native-router-flux react-native-drawer

【解决方案1】：

所以我最终使用的解决方案是让 Drawer 组件围绕 Routes

...
import Drawer from 'react-native-drawer';
...

<Drawer
          ref={(ref) => { this.props.appDrawerSet(ref); }}
          open={false}
          type="overlay"
          onOpen={() => { console.log('drawer OPENED'); }}
          onClose={() => { console.log('drawer CLOSED'); }}
          content={<SideMenu />}
          tapToClose
          openDrawerOffset={0.2}
          panCloseMask={0.2}
          negotiatePan
          styles={drawerStyles}
          tweenHandler={(ratio) => ({
            main: { opacity: Math.max(0.54, 1 - ratio) }
          })}
      >
              <Router
                  sceneStyle={styles.sceneStyle}
                  navigationBarStyle={styles.navBarStyle}
                  titleStyle={styles.titleStyle}
              >
                 <Scene key='root'>
                     //your other scennes, nested or not
                 </Scene>
              </Router>
 </Drawer>

我使用 Redux，所以 ref 可以帮助我将 Drawer 的引用发送到一个 Action，我使用它来更新一个名为 appDrawer 的状态元素/变量。然后我可以通过

控制（打开/关闭）抽屉

this.props.appDrawer.open()

或

this.props.appDrawer.close()

我的应用程序用例在 Drawer 组件上使用 tapToClose 选项而不是 close() 函数效果更好——尽管这通常在现实生活中更多用于关闭侧抽屉。

【讨论】：