在屏幕之间来回移动会导致出现两个导航栏

Question

我为此项目安装了

npm install --save react-navigation@1.5.2 

因为更高版本的React Navigation引发错误。启动应用程序时，我只有一个导航栏，但是当我在屏幕之间来回移动时，我开始得到两个导航栏。我的代码非常简单，第一个屏幕（app.js）上有两个按钮。下面是图像：

第二个按钮导航到另一个名为“ AvailableService”的页面，然后在availableService屏幕中有一个ListView，它导航到另一个名为secondactivity的屏幕。我认为这会导致循环，并导致在屏幕上出现两个导航栏。

下面是我的代码和图像的第一个屏幕，然后是可用的服务屏幕和第二个活动屏幕：

App.js代码：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, Image, TouchableOpacity} from 'react-native';
import { StackNavigator } from 'react-navigation';
import MissionActivity from './Modules/MissionActivity';
import AvailableService from './Modules/Availableservice';

type Props = {};
 class MainActivity extends Component<Props> {

  OpenMissionActivityFunction = () =>
  {
     this.props.navigation.navigate('Mission');

  }

  OpenAvailableServicesFunction = () =>
  {
     this.props.navigation.navigate('AvailableService');

  }



  render() {
    return (
      <View style = { styles.MainContainer }>
      <View style={styles.toolbar}>
         <Image 
              resizeMode='contain'
              style={styles.toolbarTitle} 
             source={require('./images/Logo.jpg')} />
      </View>
      <View>
       <Image 
        style={styles.title} 
     source={require('./images/test.png')} />
     </View>

     <View style={styles.searchButton}>
     <Button onPress = { this.OpenMissionActivityFunction } title = 'Mission'/>

    </View>
    <View style={styles.searchButton}>
      <Button onPress = { this.OpenAvailableServicesFunction } title = 'Available Services'/>
    </View>

   </View>
    );
  }
}
export default ActivityProject = StackNavigator(
  {
    First: { screen: MainActivity, navigationOptions:{header:null}  },

    Mission: { screen: MissionActivity  },

    AvailableService: {screen:AvailableService}

  });

下面是AvailableService.js的代码，它存在于名为Modules的文件夹中

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, Text, View, ListView} from 'react-native';

import {StackNavigator } from 'react-navigation';

import SecondActivity from './SecondActivity';

class AvailableService extends Component {

  constructor(props) {

       super(props);

       const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

       this.state = {

         dataSource: ds.cloneWithRows([

               'Item 1',
               'Item 2',
               'Item 3',
               'Item 4',
               'Item 5',
               'Item 6',
               'Item 7',
               'Item 8',
               'Item 9',
               'Item 10',
               'Item 11',
               'Item 12',
               'Item 13',
               'Item 14',
               'Item 15',
               'Item 16',
               'Item 17',
               'Item 18',
               'Item 19',
               'Item 20',
           ]),

       };


     }

     ListViewItemSeparatorLine = () => {
      return (
        <View
          style={{
            height: .5,
            width: "100%",
            backgroundColor: "#000",
          }}
        />
      );
    }

    OpenSecondActivity (rowData)
    {

       this.props.navigation.navigate('Second', { ListViewClickItemHolder: rowData });

    }

static navigationOptions =
  {
     title: 'FirstActivity',
  };


  render()
  {
     return(
        <View style = { styles.MainContainer }>

<ListView

           dataSource={this.state.dataSource}

           renderSeparator= {this.ListViewItemSeparatorLine}

           renderRow={
                       (rowData) => <Text style={styles.rowViewContainer} onPress={this.OpenSecondActivity.bind(this, rowData)}>{rowData}</Text>
                     }

         />


        </View>
     );
  }
}



export default Project = StackNavigator(
{
  First: { screen: AvailableService },

  Second: { screen: SecondActivity }
});

下面是来自AvailableService的图像

下面是SecondActivity的代码，它也存在于模块文件夹中

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, Text, View, ListView} from 'react-native';

export default class SecondActivity extends Component
{
  static navigationOptions =
  {
     title: 'SecondActivity',
  };

  render()
  {
     return(
        <View style = { styles.MainContainer }>

           <Text style = { styles.TextStyle }> { this.props.navigation.state.params.ListViewClickItemHolder } </Text>

        </View>
     );
  }
}

const styles = StyleSheet.create(
    {
      MainContainer:
      {
         justifyContent: 'center',
         flex:1,
         margin: 10

      },

      TextStyle:
      {
         fontSize: 23,
         textAlign: 'center',
         color: '#000',
      },

      rowViewContainer: 
      {

        fontSize: 18,
        paddingRight: 10,
        paddingTop: 10,
        paddingBottom: 10,

      }

    });

下面是secondActivity中的图片：

我不确定应该在哪里更改代码，以避免出现双重导航栏。

Answer 1

您应该在嵌套导航器上将“ headerMone”设置为无。

const Nav = StackNavigator({
   Screen: { screen: Screen }
}, {
   headerMode: 'none'
});

Here是类似的问题。