Проблемы со стеком и вкладкой навигатора в реагирующем

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 каждого класса вкладок полностью игнорируется.
И вторая проблема заключается в том, что каждый раз, когда я нажимаю на кнопку списка в верхнем правом углу, приложение вылетает вместо отображения экрана списка.

+++ ОБНОВЛЕНО +++

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);

+++ ОБНОВЛЕНИЕ 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

Вы определяете метку вкладки внутри стека, и настройка должна быть установлена ​​внутри нижней таблицы.

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"
      />
    ),    
})