Wie verwende ich react-native-flux mit react-drawer

Question

Wie benutze ich react-native-router-flux mit react-native-drawer. Ich benutze Version 3.38.0 für reactive native-Router-flux. Ich versuche Actions.refresh aufzurufen ({key: 'drawer', open: value =>! Value}); aber es funktioniert nicht.Hier ist mein Code für meine Schublade-Navigation.

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> 
    ); 
} 
} 

Export Standard DrawerNavigation;

Hier ist mein Seitenmenü

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; 

Hier ist meine Routing-Datei

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; 

Answer 1

Ab reagieren-native-Router-flux 4.0 entfernt i Reactive-native-drawer, weil eine einfache Komponente ausreicht, um Ihr Problem zu lösen:

// 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'}} 
      /> 

Das Wichtigste hier ist

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

Das Objekt contentComponent erhält hier eine „normale“ Komponente mit einem Listview (oder jetzt ein FlatList) Zeichnung Artikel als Menü und etwas anderes.

Und das ist, wie sein Aussehen, wie wenn jemand oeffnet die Schublade: