Jak połączyć reagować-rodzimej-Router-flux z reagują-native szuflady

Question

starałem się jakoś połączyć tych przykładów:

reagować-native szufladę z reagują-Native-Router-flux: następujący tej dokumentacji : https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md

Jak ustawić szufladę w pliku?

zawsze pojawiają się błędy, gdy próbuje go mieć tak:

Plik: components/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> 
     ); 
    } 
} 

Plik: App.js

import Drawer from './components/Drawer' 

otrzymuję ten błąd. enter image description here

Answer 1

Spróbuj tego podejścia poprzez wyraźne zdefiniowanie i eksportowania nazwa klasy MyDrawer:

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; 

zmienić nazwę pliku do MyDrawer.js a następnie zaimportować przy użyciu poniżej trasach:

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

nie próbowałem umieszczenie szuflady w osobnym pliku, ale to właśnie zrobiłem:

<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> 

Nie korzystałem z wielu konfiguracji, więc nie przeszkadzało mi umieszczanie go bezpośrednio w miejscu, gdzie mam Router.