我一直在使用:
反应本地路由器通量 v4.0.6
反应 v16.6.3
本机 v0.57.8
我有一个简单的问题。 我有两个组件: Listing.js 和 Detail.js
我有一个抽屉菜单。问题在于,当用户单击清单中的详细信息按钮时,下一页的汉堡菜单图标仍然存在。
但是我想将汉堡菜单更改为返回按钮。
<Router sceneStyle={{ marginTop: 15 }}>
<Scene
contentComponent={SideMenu}
drawerWidth={280}
drawerPosition={'left'}
drawerImage={require('./hamburger.png')}
initial
drawer
>
<Scene key='main'>
<Scene key='list' component={Listing} title='Albüm APP' initial />
<Scene key='detail' component={Detail} title='Albüm Detay' />
</Scene>
</Scene>
</Router>
这里是问题:
https://i.stack.imgur.com/GH40W.jpg
https://i.stack.imgur.com/oWZzN.jpg
我想在这里做
:答案 0 :(得分:1)
您似乎可以使用自定义导航栏覆盖默认导航栏
import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import mainScreen from './components/mainScreen';
import challengeScreen from './components/challengeScreen';
import NavBar from './components/NavBar';
const RouterComponent = () => {
return (
<Router>
<Scene key="root">
<Scene key="homeScreen" component={mainScreen} hideNavBar={1} />
<Scene
key="screen2" component={challengeScreen} navTransparent={1}
navBar={NavBar}
/>
</Scene>
</Router>
);
};
export default RouterComponent;
// NavBar.js
import {
View, Image, StatusBar, TouchableWithoutFeedback
} from 'react-native';
import React, { Component } from 'react';
import { Actions, Router, Scene } from 'react-native-router-flux';
class NavBar extends Component {
render() {
return (
<View style={styles.backgroundStyle}>
<StatusBar />
<View style={{ flexDirection: 'row' }}>
<TouchableWithoutFeedback onPress={() => Actions.homeScreen()}>
<Image
source={require('./Images/back-arrow.png')}
style={styles.backarrowStyle} />
</TouchableWithoutFeedback>
<Image
source={require('./Images/help.png')}
style={styles.helpStyle} />
<Image
source={require('./Images/setting.png')}
style={styles.settingStyle} />
</View>
</View>
);
}
}
const styles = {
backgroundStyle: {
backgroundColor: 'transparent'
},
backarrowStyle: {
resizeMode: 'contain',
flexDirection: 'row',
width: 50,
height: 50,
left: 0,
justifyContent: 'flex-start'
},
helpStyle: {
resizeMode: 'contain',
width: 50,
height: 50,
left: 220,
justifyContent: 'flex-end',
position: 'relative'
},
settingStyle: {
resizeMode: 'contain',
width: 50,
height: 50,
justifyContent: 'flex-end',
position: 'relative',
left: 210
}
};
export default NavBar;
答案 1 :(得分:0)
您是否尝试过将道具back
添加到您的detail
场景中?
<Scene
key='detail'
component={Detail}
title='Albüm Detay'
back
/>
摘自有关back
道具的文档
如果为true,则显示后退按钮,而不是上层容器定义的左/抽屉按钮。