Bagaimana untuk menambah dua skrin semasa menavigasi dalam aplikasi React Native, tetapi tidak menunjukkannya dalam TabBar?
P粉155551728
P粉155551728 2023-08-20 10:44:44
0
1
506

Saya memerlukan pendaftaran pengguna dan antara muka log masuk untuk tidak dipaparkan dalam TabBar Saya mempunyai aplikasi mudah dan saya cuba mempunyai dua jenis antara muka pengguna, satu mod tetamu dan satu mod pengesahan pengguna. Saya mencipta navigasi untuk setiap syarat pengesahan untuk memaparkan TabBar bagi setiap keadaan aplikasi, sama ada mod tetamu atau mod pengesahan. Saya juga mempunyai komponen TabBar untuk memaparkan ikon bagi setiap navigasi.

Masalah timbul apabila saya mahu menambah skrin LoginSkrin dan Skrin Daftar

Saya cuba mencipta Navigasi (AuthNavigator) untuk mengurus skrin ini dan akhirnya mendapat akses, tetapi ia muncul pada TabBar, Tetapi ini tidak dibenarkan, skrin ini tidak boleh diakses daripada TabBar

Saya memerlukannya untuk berada dalam navigasi, tetapi tidak dipaparkan pada TabBar.

Skrin ini tidak ditambahkan dalam fail TabBar jadi Icon

Saya cuba menggunakan options={{ tabBarVisible: false }}

Juga mencuba display = "none"

Saya mencari penyelesaian di Google tetapi tidak menemui apa-apa.

Saya ingin menunjukkan sistem navigasi saya untuk membimbing saya tentang kesalahan yang saya lakukan dan cara membetulkan kesilapan saya.

--------- App.js ---------

import React daripada 'react' import { NavigationContainer } daripada '@react-navigation/native' import GuestNavigator daripada './navigation/GuestNavigator' import AppNavigator daripada './navigation/AppNavigator' const App = () => { const isUserAuthenticated = palsu; kembali (  {isUserAuthenticated ? (  ) : (  )}  ) } eksport lalai App

---这是访客模式的导航---

---- GuestNavigator.JS -------

import { createBottomTabNavigator } daripada '@react-navigation/bottom-tabs'; import TabBar daripada '../components/TabBar'; const Tab = createBottomTabNavigator(); const GuestNavigator = ({ handleLogin }) => { kembali (  }>      } />  ); }; eksport lalai GuestNavigator;

--这是认证模式的导航--

------ AppNavigator.JS ---------

import { createBottomTabNavigator } daripada '@react-navigation/bottom-tabs'; import TabBar daripada '../components/TabBar'; const Tab = createBottomTabNavigator(); const AppNavigator = () => { kembali (  }>        ); }; eksport lalai AppNavigator

我还为登录和注册创建了一个导航系统

------- AuthNavigator.js ----------

import React daripada 'react' import { NavigationContainer } daripada '@react-navigation/native' import { createStackNavigator } daripada '@react-navigation/stack' import Skrin Masuk daripada '../screens/AuthScreens/LoginScreen' import RegisterScreen daripada '../screens/AuthScreens/RegisterScreen' const Stack = createStackNavigator() const AuthNavigator = () => { kembali (       ) } eksport lalai AuthNavigator

当然,如果我从GuestNavigator导航中删除Skrin Log Masuk,我会得到错误:

错误:未处理任何导航器的负载为{"name":"Log Masuk"}的动作'NAVIGATE'。 是否有名为'Login'的屏幕? 如果您尝试导航到嵌套导航器中的屏幕,请参阅https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested. 这只是一个开发时的警告,不会在生产中显示。

我还显示了TabBar,尽管它显示了图标,但这些屏幕没有添加。----- TabBar.js -----------

import React daripada 'react'; import { View, TouchableOpacity, Text } daripada 'react-native'; import Ikon daripada 'react-native-vector-icons/Ionicons'; const TabBar = ({ state, deskriptor, navigation, isUserAuthenticated }) => { kembali ( {state.routes.map((laluan, indeks) => { const { pilihan } = deskriptor[route.key]; const onPress = () => { acara const = navigation.emit({ taip: 'tabPress', sasaran: route.key, }); jika (!event.defaultPrevented) { navigation.navigate(route.name); } }; const isFocused = state.index === indeks; warna const = isFokus ? '#08A438' : 'hitam'; biarkan iconName; jika (!isUserAuthenticated) { // Iconos for el modo invitado if (route.name === 'Home') { iconName = 'rumah'; } else if (route.name === 'SampleNotas') { iconName = 'senarai'; } else if (route.name === 'SampleCuras') { iconName = 'medkit'; } else if (route.name === 'SamplePerfil') { iconName = 'orang'; } } lain { // Iconos para el modo autenticado if (route.name === 'Notas') { iconName = 'nota'; } else if (route.name === 'Curas') { iconName = 'medkit'; } else if (route.name === 'Recordatorios') { iconName = 'penggera'; } else if (route.name === 'Profil') { iconName = 'orang'; } } kembali ( <
P粉155551728
P粉155551728

membalas semua (1)
P粉014218124

Untuk membetulkannya, tambahkan Guestnavigator pada AuthNavigator seperti ini:

const AuthNavigator = ({}) => { return (      ); };

RefactorApp.jskepada:

const App = () => { return (  {isAuth ?  : }  ) }

Dan jangan lupa untuk mengalih keluar tab log masuk daripadaGuestNavigator.

    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!