Bagaimana untuk menambah dua skrin semasa menavigasi dalam aplikasi React Native, tetapi tidak menunjukkannya dalam TabBar?

Question

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 (
    <Bekas Navigasi>
      {isUserAuthenticated ? (
        <AppNavigator />
      ) : (
        <GuestNavigator />
      )}
    </NavigationContainer>
  )
}
eksport lalai App

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

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

import { createBottomTabNavigator } daripada '@react-navigation/bottom-tabs';
import TabBar daripada '../components/TabBar';

const Tab = createBottomTabNavigator();

const GuestNavigator = ({ handleLogin }) => {
  kembali (
    <Tab.Navigator tabBar={props => <Bar Tab {...props} />}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="SampleNotas" component={SampleNotasScreen} />
      <Tab.Screen name="SampleCuras" component={SampleCurasScreen} />
      <Tab.Screen name="SamplePerfil" component={SamplePerfilScreen} />
      <Skrin Tab
        name="Log Masuk"
        options={{ tabBarVisible: false }}
        kanak-kanak={() => <LoginScreen handleLogin={handleLogin} />}
      />
    </Tab.Navigator>
  );
};
eksport lalai GuestNavigator;

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

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

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

const AppNavigator = () => {
  kembali (
    <Tab.Navigator tabBar={props => <Bar Tab {...props} />}>
      <Tab.Screen name="Notas" component={NotasScreen} />
      <Tab.Screen name="CrearNota" component={CrearNotaScreen} options={{ tabBarVisible: false }} />
      <Tab.Screen name="Curas" component={CurasScreen} />
      <Tab.Screen name="Recordatorios" component={RecordatoriosScreen}/>
      <Tab.Screen name="Profile" component={ProfileScreen} />
      <Tab.Screen name="EditProfile" component={EditarProfileScreen} options={{ tabBarVisible: false }} />
    </Tab.Navigator>
  );
};
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 (
    <Bekas Navigasi>
      <Timbunan.Navigator>
        <Timbunan.Skrin
          name="Log Masuk"
          component={LoginScreen}
          pilihan={{
            headerShown: palsu,
          }}
        />
        <Timbunan.Skrin
          name="Daftar"
          component={RegisterScreen}
          pilihan={{
            tajuk: 'Registro',
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

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 ( <

Answer 1

Untuk membetulkannya, tambahkan Guestnavigator pada AuthNavigator seperti ini:

const AuthNavigator = ({}) => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="GuestStack" component={GuestNavigator}/>
      <Stack.Screen name="Login" component={LoginScreen}/>
      <Stack.Screen name="Register" component={RegisterScreen}/>
   </Stack.Navigator>
  );
};

Refactor App.js kepada:

const App = () => {    
  return (
    <NavigationContainer>
      {isAuth ? <AuthNavigator /> : <AppNavigator />}
    </NavigationContainer>
  )
}

Dan jangan lupa untuk mengalih keluar tab log masuk daripada GuestNavigator.