我如何使用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;
答案 0 :(得分:2)
从react-native-router-flux 4.0开始,我删除了本地抽屉,因为一个简单的组件足以解决您的问题:
// initialize Redux Router
const ReduxRouter = connect()(Router);
...
<ReduxRouter tintColor='white'>
<Scene
key='homeView'
drawer={true}
drawerImage={require('./src/img/menu.png')}
contentComponent={MenuScene}
>
<Scene key='homeViewNormal'
hideNavBar={false}
>
<Scene key='importer' hideNavBar={false} title='Import Contacts'
component={ContactImporterScene} sceneStyle={getScreenContainerStyle()}
_initial={true}
/>
<Scene key='main' hideNavBar={false} title='Chats'
type={'replace'}
leftButtonTextStyle={{color: 'green'}}
backButtonTextStyle={{color: 'green'}}
renderRightButton={this.renderRightButtonForChat}
component={ChatListViewScene} sceneStyle={getScreenContainerStyle()}
_initial={ currentUser !== null && currentUser.id }
backButtonTintColor={'white'}
backButtonTextStyle={{color: 'white'}}
/>
重要的是
<Scene
key='homeView'
drawer={true}
drawerImage={require('./src/img/menu.png')}
contentComponent={MenuComponent}
属性contentComponent
在这里接收一个“普通”组件,其中ListView(或现在是FlatList)将项目绘制为菜单和其他内容。
当有人打开抽屉时,这就是它的样子: