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

Question

我只是想添加一个带有四个按钮的虚拟底部导航栏，这些按钮实际上什么都没做。我知道这是一个奇怪的问题...

这是我的应用程序.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;