Question

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

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

尝试headerMode：＆＃39; none＆＃39;在您的孩子导航器中

check doc

react-navigation更多页面标题？

1 个答案: