Question

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

以下是一些代码：

android.useAndroidX=true
android.enableJetifier=true

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

我希望能够使用底部标签导航器浏览我的应用程序。

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

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

1 个答案: