如何防止汉堡菜单替换后退按钮？答案

【问题标题】：How to prevent hamburger menu replace over back button?如何防止汉堡菜单替换后退按钮？
【发布时间】：2019-01-30 07:45:32
【问题描述】：

我一直在使用：

react-native-router-flux v4.0.6

反应 v16.6.3

react-native v0.57.8

我有一个简单的问题。我有两个组件：Listing.js 和 Detail.js

我有一个抽屉式菜单。问题是当用户点击Listing中的detail按钮时，下一页汉堡菜单图标仍然存在。

但我想将汉堡菜单更改为返回按钮。

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

问题出在这里：

这里我想做：

【问题讨论】：

标签： react-native react-native-router-flux

【解决方案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;

// 导航栏.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;

【讨论】：

汉堡菜单出现在抽屉里还是在Detail组件中？
首先，感谢您对双节棍的帮助。汉堡菜单出现在 Detail 组件中。
请发布更多代码 :) 我明天看看。
我添加了图片。你可以看看。
我只看到了 drawerImage={require('./hamburger.png')} 。您尝试渲染 ./backArrow.png 的代码在哪里？

【解决方案2】：

您是否尝试过简单地将道具 back 添加到您的 detail 场景中？

<Scene 
  key='detail' 
  component={Detail} 
  title='Albüm Detay' 
  back
/>

来自关于 back prop 的文档

如果是 true，则显示后退按钮，而不是上容器定义的左/抽屉按钮。

【讨论】：