Geek Answers Handbook

How to combine react-native-router-stream with react-native box

I tried to somehow connect them with examples:

native-drawer reaction with native-router-flux reaction: following this documentation: https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md

How do I add a custom mailbox to a file?

I always get errors when trying to do this as follows:

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

File: App.js

 import Drawer from './components/Drawer'

I get this error. enter image description here

+5
source share
2 answers

Try this approach by explicitly defining and exporting the class name 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;

Change the file name to MyDrawer.js and then import using the following routes:

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

I did not try to put the box in a separate file, but this is what I did

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

I did not use a lot of settings, so I did not bother to put it right where I have a Router .

+9
source

More articles:


All Articles