Javascript 提供两个导航器

有一个Login.js模块，用户可以通过该模块登录。如果用户数据正确，则用户将切换到另一个Secured.js模块。为了从模块切换到模块，我使用StackNavigator。在Secured.js模块中，应在下面显示选项卡。为此，我使用TabNavigator。问题是，当我尝试呈现选项卡时，它对我不起作用，因为React Native说不能在一个页面上创建两个导航器。我试着用谷歌搜索，但除了更新React Native的建议外，我找不到任何有价值的东西，说“这是旧版本的一个bug”（我也试过了，但没用）。有什么办法可以解决吗

Secured.js

import React, { Component } from 'react';
import {
  ScrollView,
  Text,
  View,
  Button,
  StyleSheet,
  FlatList
} from 'react-native';
// Import getNews function from news.js
import { getNews } from '../screens/news';
// We'll get to this one later
import Article from '../components/Article';
import Tabs from '../screens/Tabs';

export default class Secured extends React.Component {
  static navigationOptions = {
   title: "Neuigkeiten",
   headerTintColor: "#FF0000",
   headerLeft: null,
}; 
constructor(props) {
  super(props);
  this.state = { articles: [], refreshing: true };
  this.fetchNews = this.fetchNews.bind(this);
}
// Called after a component is mounted
componentDidMount() {
  this.fetchNews();
}

fetchNews() {
  getNews()
  .then(articles => this.setState({ articles, refreshing: false }))
  .catch(() => this.setState({ refreshing: false }));
 }

 handleRefresh() {
   this.setState(
   {
    refreshing: true
  },
   () => this.fetchNews()
  );
 }

 render() {
  return (
   <View>
  <FlatList
    data={this.state.articles}
    renderItem={({ item }) => <Article article={item} />}
    keyExtractor={item => item.url}
    refreshing={this.state.refreshing}
    onRefresh={this.handleRefresh.bind(this)}
  />
    <View><Tabs /></View>
  </View>
);
}
}

---

首先，这并不是全部发生的原因，因为本地版本没有更新。这都是关于如何正确使用本机导航的

让我用两个例子来解释你们，一个是错误的方式，类似于你们的案例，第二个是非常喜欢的，正确的使用导航器的方式

在本地导航中

走错了路

export default App extends React.Component {
  render() {
    /* In the root component we are rendering the app navigator */
    return <AppNavigator />;
  }
}

const AuthenticationNavigator = createStackNavigator({
  SignIn: SignInScreen,
  ForgotPassword: ForgotPasswordScreen,
});


class AuthenticationScreen extends React.Component {
  render() {

    return (
      <AuthenticationNavigator />
    );
  }
}

const AppNavigator = createSwitchNavigator({
  Auth: AuthenticationScreen, // This screen renders a navigator!
  Home: HomeScreen,
});

import React, { Component } from 'react';
import { createBottomTabNavigator } from 'react-navigation';
import Secured from '../screens/Secured';
import Page1 from '../screens/Page1';
import Page2 from '../screens/Page2';
import Page3 from '../screens/Page3';

const Tabnav =  createBottomTabNavigator({
///  Secured: {screen:Secured,},
 Page1: {screen:Page1,},
 Page2: {screen:Page2,},
 Page3: {screen:Page3,}
});

---

并返回Tabnav in render函数，而不是导出默认值。因为我们不能在一个地方出口多个

多谢各位！这对我帮助很大！不客气，我的朋友

export default App extends React.Component {
  render() {
    return <AppNavigator />;
  }
}

const AuthenticationNavigator = createStackNavigator({
  SignIn: SignInScreen,
  ForgotPassword: ForgotPasswordScreen,
});

const AppNavigator = createSwitchNavigator({
  /* 
   * Rather than being rendered by a screen component, the
   * AuthenticationNavigator is a screen component
   */
  Auth: AuthenticationNavigator,
  Home: HomeScreen,
});

import React, { Component } from 'react';
import { createBottomTabNavigator } from 'react-navigation';
import Secured from '../screens/Secured';
import Page1 from '../screens/Page1';
import Page2 from '../screens/Page2';
import Page3 from '../screens/Page3';

const Tabnav =  createBottomTabNavigator({
///  Secured: {screen:Secured,},
 Page1: {screen:Page1,},
 Page2: {screen:Page2,},
 Page3: {screen:Page3,}
});