我如何使用react-native-router-flux与react-native-drawer . 我使用版本3.38.0 for react-native-router-flux . 我尝试调用Actions.refresh({key:'drawer',open:value =>!value});但它不起作用 . 这是我的抽屉导航代码 .
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>
);
}
}
导出默认DrawerNavigation;
这是我的侧边菜单
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;
这是我的路由文件
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;
1 回答
从react-native-router-flux 4.0开始,我删除了react-native-drawer,因为一个简单的组件足以解决您的问题:
这里重要的是
属性
contentComponent
在这里接收一个"normal"组件,其中ListView(或现在是FlatList)将项目绘制为菜单和其他内容 .当有人打开抽屉时,这就是它的样子: