Question

我在页面上显示了服务列表。我正在使用反应导航。不知何故，我在手机顶部看到两个导航栏。下面是图像：

我只想要最上面的导航栏。我不要第二个。我看了几次代码，但找不到错误。我不确定看到重复的导航栏，这是我做错了什么。下面是我的代码：

import React, { Component } from 'react';
import { Text, View, StyleSheet, ListView, ActivityIndicator, TextInput, TouchableOpacity } from 'react-native';
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux'
import reducers from '../reducers/ServiceReducer';
import ServiceItem from './ServiceItem';
import Icon from 'react-native-vector-icons/EvilIcons';
import ServiceDetail from './ServiceDetail';
import { StackNavigator } from 'react-navigation';
import ServiceListDetails from './ServiceListDetails' ;

class AutoCompActivity extends Component {

  constructor(props) {

    super(props);

    this.state = {

      // Default Value of this State.
      Loading_Activity_Indicator: true,
      text:'',
      selected_topic_id: -1,

    }
    this.arrayholder=[];
  }
 componentDidMount() {

    const data = require('../reducers/services.json')



        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.setState({
          Loading_Activity_Indicator: false,
          dataSource: ds.cloneWithRows(data),
        }, function() {

          // In this block you can do something with new state.
          this.arrayholder = data ;
        });


  }


  SearchFilterFunction(text){

    const newData = this.arrayholder.filter(function(item){
        const itemData = item.ser.toUpperCase()
        const textData = text.toUpperCase()
        return itemData.indexOf(textData) > -1
    })
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(newData),
        text: text
    })
}

ListViewItemSeparator = () => {
  return (
    <View
      style={{
        height: .5,
        width: "100%",
        backgroundColor: "#000",
      }}
    />
  );
}
clickedItemText( clickedItem )
    {
        this.props.navigation.navigate('Item', { item: clickedItem ,  navigationOptions:{header:null}}   );
    }


  static navigationOptions =
    {

     title: 'testing'

    };

render()
{
  // this is my render code. I can put the render code if someone wants to see it.
}


export default MyNewProject=   StackNavigator(
{
  First:   {screen: AutoCompActivity},
  Item: {screen: ServiceListDetails, navigationOptions:{header:null}},

}

任何帮助将不胜感激。

Answer 1

嗯，很难说出这是怎么回事。您在哪里：

static navigationOptions =
{

 title: 'testing'

};

尝试将其更改为此：

static navigationOptions =
{

 header: null,

};

您可以在几个地方禁用或定义标题。一个在组件本身中，一个在StackNavigator()的第二个参数中。

例如，您可能拥有以下内容：

export default MyNewProject = StackNavigator(
  {
    First:   {screen: AutoCompActivity},
    Item: {screen: ServiceListDetails},
  },
  {
    navigationOptions: {
      header: null,
    }
  }
)

或者您可以拥有这个：

class AutoCompActivity extends Component {
  static navigationOptions = {
    header: null,
  }

  render() {
    // ...
  }
}

昨晚我只是在这里读这篇文章。您可能会发现查看一些您当前未使用的不同方面很有帮助：https://hackernoon.com/how-to-use-a-custom-header-and-custom-bottom-tab-bar-for-react-native-with-react-navigation-969a5d3cabb1

根据我在这里看到的内容，尝试在StackNavigator的第二个参数Object中使用header: null。我觉得其中一个标头会消失，但是对于整个堆栈而言。真是令人困惑。我有时会自己讨厌它，但是一旦找到喜欢的图案，它对支持构图很有帮助。

我在这里的措辞可能令人困惑。我说的是null，直到您能完全掌握为止。

在顶部获得重复的导航选项

1 个答案: