Javascript react native中的堆栈和选项卡导航器存在问题

我注意到tab和stack navigator出现了一些不必要的效果，我无法解决问题。
首先，这里是我的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,
  },
});

+++更新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,
  },
});

import React，{Component}来自'React'；
从“react native”导入{按钮、样式表、文本、视图}；
导出默认类FirstTab扩展组件{
静态导航选项={（导航）}=>({
标题：“我的应用程序”，
头灯：(
navigation.navigate（'ListScreenID'）}
title=“列表”
/>
),
};
render（）{
返回(
这是第一个选项卡屏幕！
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
},
标签：{
尺寸：20，
textAlign:'中心'，
差额：10，
},
});

您正在堆栈内定义选项卡标签，必须在底部选项卡内设置该设置

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

这样就定义了选项卡的标签，图标也在底部选项卡中定义

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

静态导航选项=（{navigation}）=>({
tabBarLabel:'两个'，
标题：“我的应用程序”，
头灯：(
navigation.navigate（'ListScreenID'）}
title=“列表”
/>
),    
})

您正在堆栈内定义选项卡标签，必须在底部选项卡内设置该设置

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

这样就定义了选项卡的标签，图标也在底部选项卡中定义

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

静态导航选项=（{navigation}）=>({
tabBarLabel:'两个'，
标题：“我的应用程序”，
头灯：(
navigation.navigate（'ListScreenID'）}
title=“列表”
/>
),    
})

对不起，我不太明白，您想更改BottomTabNavigator标签吗？我想更改每个选项卡按钮上显示的文本。对不起，我不太明白，您想更改BottomTabNavigator标签吗？我想更改每个选项卡按钮上显示的文本。这就是诀窍，非常感谢！您有什么建议吗对于我的另一个问题，为什么我不能从选项卡视图导航到堆栈中的下一个屏幕？这必须发生，因为选项卡就是容器，你最好创建一个堆栈容器，然后在其中添加底部选项卡，在同一个容器中添加其他路由，因为所有路由都在同一个容器中，所以你不需要有问题级别。我用最新的代码更新了我的帖子，但导航到ListScreen的问题仍然存在。到底是什么问题，你是否在“生活屏幕指南”中调用导航，但什么都没有发生？如果是，请添加调用导航的代码段。我已经发布了导航调用。请查看FirstTab.js和sheaderRight属性中的econdTab.js。这就是诀窍，非常感谢！您对我的另一个问题有什么想法吗？为什么我不能从选项卡视图导航到堆栈中的下一个屏幕？这必须发生，因为选项卡就是容器，您最好创建一个堆栈容器，然后在其中添加bottomtab，并在同一个容器中添加bottomtabdd其他路线，你不需要有问题，因为所有路线都在同一级别。我用最新的代码更新了我的帖子，但导航到ListScreen的问题仍然存在。问题到底是什么，你是否在“生活指南”中调用导航，但什么都没有发生？如果是，请添加调用导航的代码段igation。我已经发布了导航调用。请查看headerRight属性中的FirstTab.js和SecondTab.js。