反应本地如何创建一个虚拟的底部标签栏

Question

我只是想添加一个虚拟的底部导航栏，其中包含四个按钮，它们实际上并没有执行任何操作。我知道这是一个奇怪的问题...

这是我的App.js

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

import Home from './screens/HomeScreen';
const AppNavigator = createStackNavigator({

  HomeScreen: { screen: Home,
    navigationOptions: ({ navigate })=> ({
      header: null,
    }),
  }

});

const App = createAppContainer(AppNavigator);

export default App;

它不需要执行任何操作，只需要在每个屏幕上显示

Answer 1

您可以尝试这个

import React, { Component } from 'react';
import { View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Home from './screens/HomeScreen';

const Dummy = () => {
  return <View />;
};

const HomeNavigator = createStackNavigator({
  HomeScreen: { screen: Home,
    navigationOptions: ({ navigate })=> ({
      header: null,
    }),
  },
});

const AppNavigator = createBottomTabNavigator({
  Tab1: {
    screen: HomeNavigator,
  },
  Tab2: {
    screen: Dummy,
  },
  Tab3: {
    screen: Dummy,
  },
  Tab4: {
    screen: Dummy,
  },
});


const App = createAppContainer(AppNavigator);

export default App;