如何将 react-native-flux 与 react-drawer 一起使用

Posted 2023-03-15

【中文标题】如何将 react-native-flux 与 react-drawer 一起使用

【英文标题】：how to use react-native-flux with react-drawer

【发布时间】：2017-09-30 08:19:39

【问题描述】：

如何将 react-native-router-flux 与 react-native-drawer 一起使用。我将 3.38.0 版用于 react-native-router-flux。 我尝试调用 Actions.refresh(key: 'drawer', open: value => !value ); 但它不起作用。这是我的抽屉导航代码。

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

class DrawerNavigation 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>
    );
 
 

导出默认 DrawerNavigation；

这是我的侧边菜单

 import React,  Component  from 'react';
 import  View, Text, TouchableHighlight, StyleSheet  from 'react-native';

 class SideMenu extends Component 
 render() 
 return (
 <View style=styles.container>
  <TouchableHighlight>
    <Text>Home</Text>
  </TouchableHighlight>
  <TouchableHighlight>
    <Text>Profile</Text>
  </TouchableHighlight>
  <TouchableHighlight>
    <Text>Friends</Text>
  </TouchableHighlight>
  </View>
  );

 const styles = StyleSheet.create(
 container: 
 flex: 1,
 padding: 30,
 backgroundColor: 'white'
 ,
 )

 export default SideMenu;

这是我的路由文件

  import React from 'react';
  import  Scene, Router, Actions, ActionConst  from 'react-native-router-
  flux';
  import RecoverForm from './components/RecoverForm';
  import DrawerNavigation from './components/DrawerNavigation';
  import Dashboard from './components/Dashboard';
  import SignupForm from './components/SignupForm';
  import LoginForm from './components/LoginForm';

  const RouterComponent = () => 
  return (
        <Router sceneStyle= paddingTop: 50, flex: 1 >

            <Scene key="auth">
                <Scene 
                    title="Please Login" 
                    component=LoginForm 
                    key="login"
                    rightTitle="Hello"
                    onRight=() => Actions.drawer()
                />

                <Scene
                    title="Sign Up"
                    component=SignupForm
                    key="signup"
                />

                <Scene
                    title="Recover Password"
                    component=RecoverForm
                    key="recover" 
                />
                </Scene>

                <Scene key="drawer" component=DrawerNavigation open=
                false initial >
                <Scene 
                    title="Dashboard" 
                    component=Dashboard 
                    key="dashboard"
                    hideNavBar=false
                    initial
                />

            </Scene>    

           </Router>
           );
           ;

export default RouterComponent;

【参考方案1】：

从 react-native-router-flux 4.0 开始，我删除了 react-native-drawer，因为一个简单的组件就足以解决您的问题：

// initialize Redux Router
const ReduxRouter = connect()(Router);

...

<ReduxRouter tintColor='white'>
      <Scene
        key='homeView'
        drawer=true
        drawerImage=require('./src/img/menu.png')
        contentComponent=MenuScene
        >
        <Scene key='homeViewNormal'
          hideNavBar=false
          >

          <Scene key='importer' hideNavBar=false title='Import Contacts'
            component=ContactImporterScene sceneStyle=getScreenContainerStyle()
            _initial=true
          />

          <Scene key='main' hideNavBar=false title='Chats'
            type='replace'
            leftButtonTextStyle=color: 'green' 
            backButtonTextStyle=color: 'green' 
            renderRightButton=this.renderRightButtonForChat
            component=ChatListViewScene sceneStyle=getScreenContainerStyle()
            _initial= currentUser !== null && currentUser.id 
            backButtonTintColor='white'
            backButtonTextStyle=color: 'white'
          />

这里最重要的是

<Scene
        key='homeView'
        drawer=true
        drawerImage=require('./src/img/menu.png')
        contentComponent=MenuComponent

contentComponent 属性在这里接收一个“普通”组件，其中包含一个 ListView（或现在是一个 FlatList）绘图项作为菜单和其他内容。

当有人打开抽屉时，它的样子是这样的：

【讨论】：

请问你的图标是从哪里得到的。我搜索了，但我找不到一个好的图标包