Блог

Я очень новичок в React, если вам нужна дополнительная информация, дайте мне знать, и я могу предоставить. Я пытаюсь добавить нижние вкладки. Я следил за документацией по реагированию на навигацию в меру своих возможностей. Я также просмотрел формы и нашел несколько похожих вопросов, но все равно не смог разобраться. Спасибо за помощь.

     import React from 'react';
    import { createStackNavigator } from "@react-navigation/stack";
    import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
    import Icon from 'react-native-ionicons';
    import Ionicons from 'react-native-vector-icons/Ionicons'
    import GreenScreen from "./GreenScreen";
    import RedScreen from "./RedScreen";

const GreenStack = createStackNavigator ();

function GreenStackScreen() {
    return (
        <GreenStack.Navigator>
            <GreenStack.Screen name="Green" component={GreenScreen}/>
            <GreenStack.Screen name="Red" component={RedScreen}/>
        </GreenStack.Navigator>
    );
}

const RedStack = createStackNavigator ();

function RedStackScreen() {

    return (
        <RedStack.Navigator>
            <RedStack.Screen name="Green" component={GreenScreen}/>
            <RedStack.Screen name="Red" component={RedScreen}/>
        </RedStack.Navigator>
    );
}


const Tab = createBottomTabNavigator();

export default function BottomTabs() {
    return (
            <Tab.Navigator
                screenOptions={({route}) => ({
                    tabBarIcon: ({color, size}) => {
                        let iconName;

                        if (route.name ==='Green') {
                            iconName='home'

                        }else if(route.name ==='Red'){
                            iconName='grid'
                        }
                        return <Ionicons name={iconName} size={20} />
                    }
                })} >
                <Tab.Screen name="Green" component={GreenStackScreen}/>
                <Tab.Screen name="Red" component={RedStackScreen} />
            </Tab.Navigator>
    )
}
  

Ваш импорт неверен, вы должны импортировать, как показано ниже

 import { createStackNavigator } from '@react-navigation/stack';
  

И нижний навигатор должен быть импортирован, как показано ниже

 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';