Question

我的问题是启动应用程序时会打开一个屏幕，其中显示5个标签，但没有打开任何标签。屏幕上有自己的用户界面，标签页上有自己的用户界面

Answer 1

我不能说我完全理解您的问题，但是我将向您展示一种使用“反应导航”选项卡栏的简单方法。创建一个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 />;
    }
}

如您所见，我们有一个第一个屏幕，其中包含tabBar和选项卡中每个选项卡的屏幕。我在stackNavigator中添加了另一个屏幕，使您可以从选项卡导航到堆栈屏幕。这完全取决于您的需求。您可以只使用选项卡，也可以组合使用选项卡和堆栈导航器。

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

1 个答案: