Блог

Главная - Вопросы по программированию - Получение модального значения за TabNavigator с помощью Modlize alwaysOpen

Получение модального значения за TabNavigator с помощью Modlize alwaysOpen

#javascript #node.js #react-native #react-native-modalize

Вопрос:

Итак, я довольно новичок в программировании, и, создавая свой первый проект React Native, я застрял, пытаясь создать модал, который всегда открыт за нижней навигацией (причина, по которой я хочу, чтобы он был похож на корзину, где всякий раз, когда пользователь что-то добавляет, он слегка подталкивается, чтобы показать, что добавлено что-то новое), мне удалось получить модал за вкладкой, но теперь нижняя вкладка не отвечает, у кого-нибудь есть исправление для этого?

мой app.js

 import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import Header from './components/Header';
import RootStack from './components/RootStack';




const App = () => {
  return (
    <>
      <Header />
      <NavigationContainer>
          <RootStack />
      </NavigationContainer>
    </>
  );
};

export default App;

Корневая система:

 import React from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import CarrinhoModal from '../CarrinhoModal'
import TabNavigator from '../TabNavigator';

const StackNavigation = createStackNavigator();
const RootStack = () => {
  return (
    <>
        <StackNavigation.Navigator headerMode='none' >
          <StackNavigation.Screen name='Tab' component={TabNavigator} />
          <StackNavigation.Screen name='Carrinho' getComponent={CarrinhoModal} />
        </StackNavigation.Navigator>
    </>
  )
}

export default RootStack;

Навигатор:

 import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../../pages/Home'
import Perfil from '../../pages/Perfil'
import CarrinhoModal from '../CarrinhoModal';





const Tab = createBottomTabNavigator();
const TabNavigator = ({ navigation }) => {
  return (
    <>
      <Tab.Navigator
        initialRouteName="Home"
        tabBarOptions={{
          activeTintColor: 'white',
          inactiveTintColor: 'gray',
          activeBackgroundColor: '#1E4B75',
          inactiveBackgroundColor: '#1E4B75'
        }}
      >
        {/* <Tab.Screen
          name='Carrinho'
          component={CarrinhoModal}
          listeners={( navigation ) => ({
            tabPress: e => {
              e.preventDefault();
              navigation.navigate(CarrinhoModal)
            }
          })}
        /> */}
        <Tab.Screen name='Home' component={Home} />
        <Tab.Screen name='Perfil' component={Perfil} />
      </Tab.Navigator>
      <CarrinhoModal />
    </>
  )
}



export default TabNavigator;

CarrinhoModal:

 import React, { useRef } from 'react'
import { Modalize } from 'react-native-modalize';
import Carrinho from '../../pages/Carrinho';


const CarrinhoModal = (props) => {



  return (
    <>
      <Modalize
      ref={props.modalRef}
        alwaysOpen={75}
        modalHeight={400}
        handlePosition='inside'
      >
        <Carrinho />
      </Modalize>
    </>
  )
}

export default CarrinhoModal;

As I said I’m pretty new in all this so if you could point me in the right direction it would be much apreciated!

Метки: