如何在React Native中没有打开选项卡的组件类中显示选项卡栏

Question

我的问题是，当应用程序启动时，有一个打开的屏幕，其中有5个选项卡显示，但没有打开选项卡。屏幕有自己的UI和选项卡具有自己的UI

Answer 1

我不能说我完全理解您的问题，但是我将向您展示一种使用React-Navigation Tab Bar的简单方法。创建一个router.js文件以定义您的路由。

//router.js
import React from 'react';
import {
    createBottomTabNavigator,
    createAppContainer,
    createStackNavigator
} from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons'
//Screens
import Home from '../screens/Home';
import TabTwo from '../screens/TabTwo';
import AStackScreen from '../screens/AStackScreen';

const TabNavigator = createBottomTabNavigator({
    Home: Home,
    TabTwo: TabTwo
},
{
    defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, horizontal, tintColor }) => {
            if (navigation.state.routeName === 'Home') {
                return <Icon name='ios-locate' size={30} color={tintColor} />
            } else if (navigation.state.routeName === 'TabTwo') {
                return <Icon name='ios-heart' size={30} color={tintColor} />
            }
        },
        tabBarOptions: {
            activeTintColor: '#ff4949',
            inactiveTintColor: 'gray',
            style: { backgroundColor: '#000', paddingTop: 5 }
        },
    })
});
const StackNavigator = createStackNavigator(
    {
        Root: TabNavigator,
        AStackScreen: AStackScreen
    },
    {
        defaultNavigationOptions: ({ navigation }) => ({
            headerTitle: 'Whatever',
            headerStyle: {
                backgroundColor: '#000',
                elevation: 0,
            },
            headerTitleStyle: {
                color: '#999',
                fontSize: 16,
            },
            headerBackTitleStyle: {
                color: '#999',
                fontSize: 14
            }
        })
    }
)
export const MainNavigator = createAppContainer(StackNavigator);

在您的App.js

中

import React, {Component} from 'react';
import { MainNavigator } from './src/router.js';
export default class App extends Component {
    render() {
        return <MainNavigator />;
    }
}

您可以看到，我们有一个第一个屏幕，该屏幕将塔巴尔包含在选项卡中的每个屏幕上。我已经在堆叠式刀片中添加了另一个屏幕，该屏幕使您可以从选项卡中导航到堆栈屏幕。这完全取决于您的需求。您只能使用选项卡或使用标签和堆栈导航器的组合。