渲染两个导航器

Question

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

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

Tabs.js

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

export default createBottomTabNavigator({
///  Secured: {screen:Secured,},
 Page1: {screen:Page1,},
 Page2: {screen:Page2,},
 Page3: {screen:Page3,}
});

Answer 1

首先，由于react-native版本未更新，因此并没有全部发生。都是关于本机导航错误使用的。

让我用两个例子向您解释，一个例子与您的案例类似，是错误的方式，第二个例子是使用导航器的正确方法。

在React Native导航中，

错误的方式

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

在导航器内部的屏幕中，我们正在渲染另一个导航器。您应该避免这种情况！它将具有自己的导航状态，并且无法与任何父级导航器进行交互，例如：它将不知道路径“ Home”存在

正确且高度推荐的方式

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

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