Wie kombinieren reagiert-native-Router-Fluss mit reagieren-native-Schublade

Question

Ich habe versucht, diejenigen zu Beispielen irgendwie zu verbinden:

reagieren-native-Schublade mit reagieren-native-Router-flux: im Anschluss an dieser Dokumentation : https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md

Wie muss ich die benutzerdefinierte Schublade in eine Datei einfügen?

ich immer Fehler auftreten, wenn man versucht, es so zu haben:

Datei: Komponenten/Drawer.js

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

export default class 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> 
     ); 
    } 
} 

Datei: App.js

import Drawer from './components/Drawer' 

ich dieser Fehler. enter image description here

Answer 1

versuchen, diesen Ansatz durch die explizite Definition und Klassennamen MyDrawer exportieren:

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

class MyDrawer 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 default MyDrawer; 

Ändern Sie den Dateinamen zu MyDrawer.js und dann unter Routen mit importieren:

import MyDrawer from './components/MyDrawer' 
import TestView from './components/TestView' 



    render() { 
     return (
     <Router> 
      <Scene key="drawer" component={MyDrawer}> 
        <Scene key="main" tabs={false} > 
        <Scene key="fireBaseTest" component={TestView} drawerImage={navToggle} /> 
        //add more scenes here 
        </Scene> 
      </Scene> 
     </Router>); 

    } 
} 

Answer 2

ich nicht versucht haben, Putting die Schublade in eine separate Datei, aber das ist, was ich getan habe

<Drawer 
    type="static" 
    content={<Menu closeDrawer={() => this.drawer.close() }/>} 
    openDrawerOffset={100} 
    tweenHandler={Drawer.tweenPresets.parallax} 
    tapToClose={true} 
    ref={ (ref) => this.drawer = ref} 
> 
    <Router> 
      <Scene key="root"> 
       <Scene key="home" initial={true}/> 
      </Scene> 
    </Router> 
</Drawer> 

Ich habe nicht viel Konfiguration verwendet, also hat es mich nicht gestört, es direkt dort zu platzieren, wo ich die Router habe.