javascript - 如何在堆栈导航器中嵌套底部标签栏？

Question

我试图在我的堆栈导航器中嵌套一个选项卡导航器，但我不确定如何解决这个问题，所以我问你。我已经阅读了一些内容，但仍然没有找到解决这个问题的正确方法。

这是一些代码：

import { createAppContainer, createBottomTabNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

const RootStack = createStackNavigator(
  {
    Home: LoginForm,
    Feed: NewsDetail,
    Unique: NewsUniquePage
  },
  {initialRouteName: 'Feed',
   defaultNavigationOptions: {
    headerStyle:{
      backgroundColor: 'white',
    },
    headerTintColor: 'black',
    headerTitleStyle:{
      textAlign: 'center',
      flex: 1
    }
  }},
);

const AppContainer = createAppContainer(RootStack)

尽管这是与导航相关的唯一代码块，但我有更多代码。

我希望能够使用底部选项卡导航器在我的应用程序中导航。

标签： javascriptreact-nativereact-navigation

Answer 1

import React from 'react';
import { Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator} from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

class SplashScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Splash!</Text>
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

const AppNavigator = createStackNavigator({
  Splash : SplashScreen
  Home: TabNavigator
});

export default createAppContainer(AppNavigator);