react-native中的堆栈和选项卡导航器的问题

Question

我注意到使用制表符和堆栈导航器的一些不需要的效果，我无法弄清楚问题。 首先，这是我的App.js：

import React, {Component} from 'react';
import { createBottomTabNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
import FirstTab from './react/ui/FirstTab';
import SecondTab from './react/ui/SecondTab';
import ListScreen from './react/ui/ListScreen';

const FirstStack = createStackNavigator({
  FirstTabID: FirstTab,
  ListScreenID: ListScreen,
});

const SecondStack = createStackNavigator({
  SecondTabID: SecondTab,
  ListScreenID: ListScreen,
});

const TabNavigator = createBottomTabNavigator({
  FirstTabID: FirstStack,
  SecondTabID: SecondStack,
});

export default createAppContainer(TabNavigator);

这是FirstTab.js：

import React, {Component} from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

export default class FirstTab extends Component {
  static navigationOptions = {
    tabBarLabel: 'One',
    title: 'My app',
    headerRight: (
      <Button
        onPress={() => this.props.navigation.navigate('ListScreenID')}
        title="List"
      />
    ),
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.label}>This is the first tab screen!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  label: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

这是SecondTab.js：

import React, {Component} from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

export default class SecondTab extends Component {
  static navigationOptions = {
    tabBarLabel: 'Two',
    title: 'My app',
    headerRight: (
      <Button
        onPress={() => this.props.navigation.navigate('ListScreenID')}
        title="List"
      />
    ),
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.label}>This is the second tab screen!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  label: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

最后是ListScreen.js：

import React, {Component} from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

export default class ListScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.label}>And this is the list screen!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  label: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

好吧，出现问题的是标签标有“第一堆栈”和“第二堆栈”。似乎完全忽略了每个选项卡类的navigationOptions.tabBarLabel属性。 第二个问题是，每当我点击右上角的列表按钮时，应用程序崩溃而不是显示列表屏幕。

+++ UPDATED +++

import React, {Component} from 'react';
import { createBottomTabNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
import FirstTab from './react/ui/FirstTab';
import SecondTab from './react/ui/SecondTab';
import ListScreen from './react/ui/ListScreen';

const FirstStack = createStackNavigator({
  FirstTabID: {
    screen: FirstTab
  }
});

const SecondStack = createStackNavigator({
  SecondTabID: {
    screen: SecondTab
  }
});

const TabNavigator = createBottomTabNavigator(
  {
    FirstTabID: {
      screen: FirstStack,
      navigationOptions: {
        tabBarLabel: 'One'
      }
    },
    SecondTabID: {
      screen: SecondStack,
      navigationOptions: {
        tabBarLabel: 'Two'
      }
    }
  }
);

const Navigation = createStackNavigator(
  {
    Tabs: {
      screen: TabNavigator
    },
    ListScreenID: {
      screen: ListScreen
    }
  },
  {
    initialRouteName: 'Tabs'
  }
);

export default createAppContainer(Navigation);

+++ UPDATE FirstTab.js +++

import React, {Component} from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

export default class FirstTab extends Component {
  static navigationOptions = { (navigation) } => ({
    title: 'My app',
    headerRight: (
      <Button
        onPress={() => navigation.navigate('ListScreenID')}
        title="List"
      />
    ),
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.label}>This is the first tab screen!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  label: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

Answer 1

您正在堆栈内定义选项卡标签，并且必须在bottomtab中设置该设置。

const TabNavigator = createBottomTabNavigator({
    FirstTabID: { 
        screen: FirstStack, 
        navigationOptions: {
            tabBarLabel: 'One'
        }
    },
    SecondTabID: { 
        screen: SecondStack,
        navigationOptions: {
            tabBarLabel: 'Two'
        }
    },
});

通过这种方式定义选项卡的标签，图标也在底部选项卡中定义。

static navigationOptions = ({ navigation }) => ({
    tabBarLabel: 'Two',
    title: 'My app',
    headerRight: (
      <Button
        onPress={() => navigation.navigate('ListScreenID')}
        title="List"
      />
    ),    
})