Вложенный вопрос навигации - как экспортировать BottomTabNavigator - PullRequest
Новая
       44

Вложенный вопрос навигации - как экспортировать BottomTabNavigator

0 голосов
/ 02 мая 2020

У меня возникла проблема с моим bottomTabNavigator, который должен загружать главные страницы для приложения (main, kowops, wallet, scan), которое вложено в навигатор стека, который обрабатывает экраны входа / регистрации (вход, регистрация, забытие) пароль).

Это мой главный. js

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Scan from './Scan';
import Kowops from './Kowops';
import Wallet from './Wallet';

export default class Main extends Component {
    render() {

        return (
            <View style={styles.container}>
            <View style={{alignItems: 'center'}}>
            <Text style={styles.plainText} onPress={() => this.props.navigation.navigate('Register')}>
            This is the main page, return to registration
            </Text>
            <View style={{height:5}}></View>
            </View>
            </View>
        )
    }
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Main" component={Main} />
        <Tab.Screen name="Scan" component={Scan} />
        <Tab.Screen name="Wallet" component={Wallet} />
        <Tab.Screen name="Kowops" component={Kowops} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export function BottomNav() {
    return (
      <NavigationContainer>
        <MyTabs />
      </NavigationContainer>
    );
  }

const styles = StyleSheet.create({
    container: {
        flex: 2,
        backgroundColor:'#ffffff',
        padding: 10,
        alignItems: 'stretch',
        justifyContent: 'space-around'
    },
    logoContainer: {
        height: 120,
        padding: 10,
        alignItems: 'center' ,
        justifyContent: 'flex-end' 
    },
    logo: {
        height: 50,
        width: 165
    },
    formContainer: {
        flex:1,
        alignItems: 'center' ,
        justifyContent: 'center' 

    },
    buttonContainer: {
    padding: 10, 
    marginBottom: 20, 
    width: 250, 
    alignItems: 'center', 
    backgroundColor: '#c5e1a5'
  },
    inputTextField: {
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: 10, 
            height: 40, 
            width: 250,
            marginBottom: 10,
            fontSize: 16,
            borderBottomWidth : 1.0,
    },
    plainText: {
        fontSize: 16,
        marginBottom: 5,
        color: '#59616e',
        textDecorationLine: 'underline',
      },
});

А это мое приложение. js с навигатором стека входа 

/**
 * Load navigation
 * Check login state
 * Navigate to register.js if no valid session is detected
 * Navigate to home.je is a valid session is detected
 */
import 'react-native-gesture-handler';
import React from 'react';
import Register from './register';
import Login from './login';
import main from './main';
import ForgotPassword from './forgotPassword';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Register" screenOptions={{headerShown: false}}>
        <Stack.Screen name="Register" component={Register} />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
        <Stack.Screen name="Main" component={main} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Сейчас моя нижняя навигация не отображается на главной странице. Ай уже пытался заменить значение по умолчанию в main. js вот так 

export class Main extends Component 
& 
export default function BottomNav()

Но тогда я получаю 

a nasty error: 

Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitely. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.

This error is located at:
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:66)
    in ThemeProvider (at NavigationContainer.tsx:65)
    in ForwardRef(NavigationContainer) (at main.js:42)
    in BottomNav (at SceneView.tsx:98)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:89)
    in EnsureSingleNavigator (at SceneView.tsx:88)
    in SceneView (at useDescriptors.tsx:125)
    in RCTView (at CardContainer.tsx:199)
    in RCTView (at CardContainer.tsx:198)
    in RCTView (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:526)
    in RCTView (at createAnimatedComponent.js:144)
    in AnimatedComponent (at createAnimatedComponent.js:194)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:508)
    in PanGestureHandler (at GestureHandler.native.tsx:13)
    in PanGestureHandler (at Card.tsx:502)
    in RCTView (at createAnimatedComponent.js:144)
    in AnimatedComponent (at createAnimatedComponent.js:194)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:498)
    in RCTView (at Card.tsx:492)
    in Card (at CardContainer.tsx:164)
    in CardContainer (at CardStack.tsx:497)
    in RCTView (at Screens.tsx:70)
    in MaybeScreen (at CardStack.tsx:490)
    in RCTView (at Screens.tsx:48)
    in MaybeScreenContainer (at CardStack.tsx:388)
    in CardStack (at StackView.tsx:433)
    in KeyboardManager (at StackView.tsx:431)
    in RNCSafeAreaView (at src/index.tsx:28)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at StackView.tsx:428)
    in RCTView (at StackView.tsx:427)
    in StackView (at createStackNavigator.tsx:82)
    in StackNavigator (at App.js:21)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:288)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:66)
    in ThemeProvider (at NavigationContainer.tsx:65)
    in ForwardRef(NavigationContainer) (at App.js:20)
    in App (at renderApplication.js:45)
    in RCTView (at AppContainer.js:109)
    in RCTView (at AppContainer.js:135)
    in AppContainer (at renderApplication.js:39)

BaseNavigationContainer
    BaseNavigationContainer.tsx:114:12
renderWithHooks
    ReactNativeRenderer-dev.js:10989:26
updateForwardRef
    ReactNativeRenderer-dev.js:13060:34
invokeGuardedCallbackImpl
    ReactNativeRenderer-dev.js:286:4
invokeGuardedCallback
    ReactNativeRenderer-dev.js:497:2
beginWork$$1
    ReactNativeRenderer-dev.js:22028:27
performUnitOfWork
    ReactNativeRenderer-dev.js:20871:23
workLoopSync
    ReactNativeRenderer-dev.js:20848:38
performSyncWorkOnRoot
    ReactNativeRenderer-dev.js:20456:22
performSyncWorkOnRoot
    [native code]:0
runWithPriority$argument_1
    ReactNativeRenderer-dev.js:5703:31
unstable_runWithPriority
    scheduler.development.js:818:23
flushSyncCallbackQueueImpl
    ReactNativeRenderer-dev.js:5698:21
flushSyncCallbackQueue
    ReactNativeRenderer-dev.js:5686:28
flushSync
    ReactNativeRenderer-dev.js:20630:26
scheduleRefresh
    ReactNativeRenderer-dev.js:6492:13
mountedRoots.forEach$argument_0
    react-refresh-runtime.development.js:218:8
forEach
    [native code]:0
performReactRefresh
    react-refresh-runtime.development.js:210:4
Refresh.performReactRefresh
    setUpReactRefresh.js:43:6
setTimeout$argument_0
    require.js:627:10
_callTimer
    JSTimers.js:135:14
callTimers
    JSTimers.js:387:16
__callFunction
    MessageQueue.js:425:19
__guard$argument_0
    MessageQueue.js:112:6
__guard
    MessageQueue.js:373:10
callFunctionReturnFlushedQueue
    MessageQueue.js:111:4
callFunctionReturnFlushedQueue
    [native code]:0

У кого-нибудь есть идеи, как это исправить?

Бест,

Тим

1 Ответ

0 голосов
/ 02 мая 2020

изменить 

function MyTabs() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Main" component={Main} />
        <Tab.Screen name="Scan" component={Scan} />
        <Tab.Screen name="Wallet" component={Wallet} />
        <Tab.Screen name="Kowops" component={Kowops} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export function BottomNav() {
    return (
      <NavigationContainer>
        <MyTabs />
      </NavigationContainer>
    );
  }

на 

function MyTabs() {
  return (
      <Tab.Navigator>
        <Tab.Screen name="Main" component={Main} />
        <Tab.Screen name="Scan" component={Scan} />
        <Tab.Screen name="Wallet" component={Wallet} />
        <Tab.Screen name="Kowops" component={Kowops} />
      </Tab.Navigator>
  );
}

export function BottomNav() {
    return (
        <MyTabs />
    );
  }

вы вкладываете NavigationContainer удалить NavigationContainers, как я уже говорил.

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...