反应-导航更多的页眉？

Question

标签和堆栈，当使用时，出现多个标题后跳转到下一个页面样式，我的反应-导航配置有问题吗?有更好的解决方案吗？这是应用程序入口：

App.js

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';
import { Button } from 'antd-mobile';
import C from './C';
import D from './D';

class App extends Component {

  render() {
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Button onClick={() => this.props.navigation.navigate('cc')}>A页面</Button>
      </View>
    );
  }
}
class B extends React.Component {
  render() {
    return (
      <View>
        <Button onClick={() => this.props.navigation.navigate('dd')}>B页面</Button>
      </View>
    );
  }
}

const tab = TabNavigator({
  c: {
    screen: App, navigationOptions: {
      tabBarLabel: 'A',
    }
  },
  d: {
    screen: B, navigationOptions: {
      tabBarLabel: 'B'
    }
  },
});
tab.navigationOptions = {
  title: 'A和B',
};
const SimpleApp = StackNavigator({
  Home: { screen: tab },
  cc: { screen: C },
  dd: {screen: D},
});

export default SimpleApp;

这是C页代码：

C.js

 import React, { Component } from 'react';
import { List,Button } from 'antd-mobile';
import { StackNavigator, TabNavigator } from 'react-navigation';

import {
  Platform,
  StyleSheet,
  Text,
  Image,
  View
} from 'react-native';

class C extends Component {
    static navigationOptions = ({ navigation }) => ({  
        title: 'C页面',  
    }); 
  render() {
    return (
      <View>
        <Button>C页面</Button>
      </View>
    );
  }
}

export default C; 

这是D页代码：

D.js

import React, { Component } from 'react';
import { List,Button } from 'antd-mobile';
import { StackNavigator, TabNavigator } from 'react-navigation';
import E from './E';

import {
  Platform,
  StyleSheet,
  Text,
  Image,
  View
} from 'react-native';

class D extends Component {
    static navigationOptions = ({ navigation }) => ({  
        title: 'D页面', 
    });
  render() {
    return (
      <View>
        <Button onClick={()=>this.props.navigation.navigate('ee')}>D页面</Button>
      </View>
    );
  }
}
const Simple = StackNavigator({  
    dd: { screen: D },
    ee: { screen: E },  
  });
export default Simple;

这是E页代码：

E.js

import React, { Component } from 'react';
import { List,Button } from 'antd-mobile';
import { StackNavigator, TabNavigator } from 'react-navigation';

import {
  Platform,
  StyleSheet,
  Text,
  Image,
  View
} from 'react-native';

class E extends Component {
    static navigationOptions = ({ navigation }) => ({  
        title: 'E页面',  
    });
  render() {
    return (
      <View>
        <Button>E页面</Button>
      </View>
    );
  }
}

export default E;

​

TabNavigator和mord StackNavigator，为什么？A->C->D错误？我的配置错误发生在哪里？

Answer 1

有headerMode选项可以添加到navigatorsOptions中，

尝试头模式:在您的子导航器中“无”

检查医生