Question

我的代码是here

我遇到嵌套tabNavigators的问题。顶部的tabnavigator嵌套在底部的tabnavigator中。但是，当我在顶部切换标签时，它会将底部标签的标签更改为突出显示的标签的标签。我在这做错了什么？请参阅下面的屏幕截图。

当在顶部选择“播放测试时，最左边的标签也会变为播放测试”

这是该屏幕的代码：

    import { StackNavigator, TabNavigator, DrawerNavigator } from 'react-navigation';

// Home scenes
import Home from '../scenes/Home';

// Authentication scenes
import Login from '../scenes/authentication/Login';
import SignUpStep from '../scenes/authentication/SignUpStep';
import SelectTeachers from '../scenes/authentication/SelectTeachers';
import AddChild from '../scenes/authentication/AddChild';

// import Dashboard from '../components/Dashboard'
// import FeedScreen from '../components/FeedScreen'
import AwardsScreen from '../scenes/award/AwardsScreen';
// import StudentsScreen from '../components/StudentsScreen'
import GameOnScreen from '../scenes/game/GameOnScreen';

// All practice scenes
import AllPractice from '../scenes/practice/AllPractice';
import Practice from '../scenes/practice/Practice';
import PlayingTests from '../scenes/practice/PlayingTests';
import Questions from '../scenes/practice/Questions';
import Individuals from '../scenes/students/individuals';

// Group
import Groups from '../scenes/students/groups';

// Upload
import UploadsScreen from '../scenes/upload/UploadsScreen';
import Pending from '../scenes/students/pending';

//import CustomDrawerContentComponent from './CustomDrawerContentComponent';


// Constant for tab menus
const submissionMenu = {
  screen: TabNavigator({
    All: { screen: AllPractice },
    Practice: { screen: Practice },
    PlayingTests: { screen: PlayingTests },
    Questions: { screen: Questions }
  }, {
    tabBarPosition: 'top',
    flex: 2 / 3,
    tabBarOptions: {
      activeTintColor: '#33ACDE',
      labelStyle: {
          fontSize: 12,
            },
      tabStyle: {
        width: 50,
                },
    }
  }
  )
};
const studentMenu = {
  screen: TabNavigator({
    Individuals: { screen: Individuals },
    Groups: { screen: Groups },
    Pending: { screen: Pending }
  }, {
    tabBarPosition: 'top',
    flex: 2 / 3,
    tabBarOptions: {
      activeTintColor: '#33ACDE',
      labelStyle: {
          fontSize: 12,
            },
      tabStyle: {
        width: 50,
                },
    }
  }
  )
};

// Navigation defined
const navigator = StackNavigator({
  home: { screen: Home },
  signup: { screen: DrawerNavigator(
    {
      addchild: { screen: AddChild,
          navigationOptions: {
            drawerLabel: 'Add new child'
          },
        },
      selectTeachers: { screen: SelectTeachers },
    },
  ) },
  login: { screen: Login },
  selectTeachers: { screen: SelectTeachers },
  addchild: { screen: AddChild },
  dashboard: {
    screen: TabNavigator({
      Submissions: submissionMenu,
      Students: studentMenu,
      Awards: { screen: AwardsScreen },
      GameOn: { screen: GameOnScreen },
      Uploads: { screen: UploadsScreen }
    }, {
      tabBarPosition: 'bottom',
      tabBarOptions: {
        activeTintColor: '#33ACDE',
        labelStyle: {
            fontSize: 12,
              },
        tabStyle: {
          width: 50,
                  }

      }
    }),
  }
});

export default navigator;

Answer 1

这似乎是一个错误。我建议你在Github页面上发布一个问题。

虽然Tab的标题会受到屏幕中static navigationOptions的影响。因此，您可以尝试将其位置移至TabNavigator上的{screen:YOURSCREEN, navigationOptions:NAVIGATIONOPTION}，并测试是否可行。

嵌套TabNavigators问题

1 个答案: