如何将 react-native-router-flux 与 react-native-drawer 结合起来
How to combine react-native-router-flux with react-native-drawer
我试图以某种方式将它们与示例联系起来:
react-native-drawer 与 react-native-router-flux:
遵循此文档:
https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md
如何将自定义抽屉放入文件中?
当我尝试这样设置时,我总是出错:
文件:
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>
);
}
}
文件:App.js
import Drawer from './components/Drawer'
我收到这个错误。
通过显式定义和导出 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;
将文件名更改为 MyDrawer.js
,然后使用以下路径导入:
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>);
}
}
我没有尝试将抽屉放在单独的文件中,但我就是这么做的
<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>
我没有使用很多配置,所以直接把它放在我有 Router
的地方并没有打扰我。
我试图以某种方式将它们与示例联系起来:
react-native-drawer 与 react-native-router-flux: 遵循此文档: https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md
如何将自定义抽屉放入文件中?
当我尝试这样设置时,我总是出错:
文件: 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>
);
}
}
文件:App.js
import Drawer from './components/Drawer'
我收到这个错误。
通过显式定义和导出 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;
将文件名更改为 MyDrawer.js
,然后使用以下路径导入:
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>);
}
}
我没有尝试将抽屉放在单独的文件中,但我就是这么做的
<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>
我没有使用很多配置,所以直接把它放在我有 Router
的地方并没有打扰我。