如何在选项卡导航器中使用选项卡导航器？

Question

我是 React-Native 的新手，正在尝试创建一个我想在其中使用 2 tab navigator 的应用程序；外标签和内标签。

用于储罐、警报和设置的外部选项卡... 用于地图视图和列表视图的坦克内的内部选项卡...

export default class Home extends Component {
static navigationOptions = {
    header:null
};

constructor(props) {
    super(props);
    this.state = {
    }
}

render() {
    return (
        <MyApp/>
    );
}
}
export const MyApp = TabNavigator({

tanks: {
screen: TanksScreen
},
alerts: {
screen: AlertScreen
},
 Settings: {
    screen: SettingScreen
 },
},

以及 TanksScreen 中的以下代码

export default class TanksScreen extends Component {
static navigationOptions = {
header:null
};

constructor(props) {
  super(props);
  this.state = {
  }
}
render() {
  return (
      <MapsView/>
  );
}
}
export const MapsView = TabNavigator({

Map: {
 screen: MapsScreen,
},
List: {
 screen: ListScreen,
},
},

通过使用上面的代码，我可以获得外部选项卡导航器的全部功能，但是当涉及到内部选项卡时，选项卡既不会导航到 listview 屏幕，也不会在 mapsview 中呈现任何文本或 ui 组件。

我做错了吗？或者有什么办法可以满足这个要求。提前谢谢

Answer 1

由于您的TanksScreen 组件只返回内部选项卡，您可以直接将它们插入外部选项卡，这应该可以解决问题。

export const MyApp = TabNavigator({
  tanks: {
    screen: MapsView
  },
  alerts: {
    screen: AlertScreen
  },
  Settings: {
    screen: SettingScreen
  },
}