渲染两个导航器

Question

有一个Login.js模块，通过这个模块用户可以登录。如果用户数据正确，则用户切换到另一个Secured.js模块。为了从模块切换到模块，我使用 StackNavigator。在 Secured.js 模块中，Tabs 应显示在下方。为此，我使用 TabNavigator。问题是当我尝试呈现选项卡时，它对我不起作用，因为 React Native 说不能在一个页面上创建两个导航器。我尝试 google，但我找不到任何有价值的东西，除了更新 React Native 的建议，说 "this is a bug of the old version"（我也尝试过，但没有帮助）。我有什么解决办法吗？

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 navigation 的错误使用。

让我用两个例子来解释你，一个是与你的情况相似的错误方式，第二个是非常喜欢的，使用导航器的正确方式。

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

和return渲染函数中的Tabnav，而不是导出默认值。因为我们不能在一个地方导出多个。

渲染两个导航器

Render two navigators

javascript

react-native

react-native-ios