React Native - для входа в систему не определен маршрут - PullRequest
Новая
       31

React Native - для входа в систему не определен маршрут

0 голосов
/ 28 августа 2018

Я учусь реагировать на родной язык с помощью настройки tabNavigator, DrawerNavigator и StackNavigator на один без NativeBase или Expo с единой библиотекой реагирующей навигации.

Я добился этого, но при выполнении какой-то определенной последовательности в моем приложении возникает ошибка.

Приложение запускается с вкладки экрана. -> Изменить вкладку -> Открыть ящик -> Перейти в стек -> открыть ящик, а затем перейти к вкладкам дает эту ошибку.

Вот мой код:

App.js 

import React from 'react';
import {Drawer} from "./src/navigation/MergedNavigator";
import {View,Text} from "react-native";

const App = () => (
    <View style={{flex: 1,backgroundColor: '#293656'}}>
        <Drawer />
    </View>
);

export default App;

MergedNavigator.js 

import {DrawerNavigator,StackNavigator,createBottomTabNavigator} from 'react-navigation';

// stack navigation screens
import DetailScreen from '../screens/detail';
import MainScreen from '../screens/main';
import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';

// tab navigator screens
import LoginScreen from '../screens/Login';
import TabOne from '../screens/tabA';
import TabTwo from '../screens/tabB';

//plain

export const stack = StackNavigator({
    DetailScreen:{screen:DetailScreen},
    MainScreen:{screen:MainScreen}
},{
    initialRouteName:'DetailScreen'
});

const secondStack = StackNavigator({
    RegisterScreen:{screen:RegisterScreen},
    ForgotScreen:{screen:ForgotScreen}
},{
    initialRouteName:'ForgotScreen'
})

export const Tabs = createBottomTabNavigator({
    Login:{screen:LoginScreen},
    TabOne:{screen:secondStack},
    TabTwo:{screen:TabTwo}
},{
    animationEnabled:true
})

export const Drawer = DrawerNavigator({
    Tabs:{screen:Tabs},
    Stack:{screen:stack}
})

И все остальные импортированные стековые экраны имеют только заголовок. В чем здесь проблема с моим кодом? Или есть какой-нибудь лучший способ, которым я могу достигнуть этого все 3 Навигатора только с реагирующей навигацией?

Ответы [ 3 ]

0 голосов
/ 05 сентября 2018

Прежде всего, ваша главная проблема в том, что вы не можете создать более одного StackNavigator () для своего кода.

Пожалуйста, попробуйте другой навигатор для перенаправления, как показано в примере кода. 

import {DrawerNavigator,StackNavigator,createBottomTabNavigator,createMaterialTopTabNavigator} from 'react-navigation';

// stack navigation screens
import DetailScreen from '../screens/detail';
import MainScreen from '../screens/main';
import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';

// tab navigator screens
import * as TAB from '../tab';

export const stack = StackNavigator({
    DetailScreen:{screen:DetailScreen},
    MainScreen:{screen:MainScreen}
},{
    initialRouteName:'DetailScreen'
});

const secondStack = createMaterialTopTabNavigator({
    RegisterScreen:{screen:RegisterScreen},
    ForgotScreen:{screen:ForgotScreen}
},{
    initialRouteName:'ForgotScreen'
})

export const Tabs = createBottomTabNavigator({
    Login:{screen:TAB.Login},
    TabOne:{screen:secondStack},
    TabTwo:{screen:TAB.TabB}
},{
    animationEnabled:true,
    initialRouteName:'Login'
})

export const Drawer = DrawerNavigator({
    Tabs:{screen:Tabs},
    Stack:{screen:stack}
},
{
    animationEnabled:true,
    initialRouteName:'Tabs'
})

Надеюсь, что фрагмент кода полезен для вас.

0 голосов
/ 13 мая 2019 
import { StackActions, NavigationActions } from 'react-navigation';

let { navigation } = this.props;
let resetAction = StackActions.reset({
    key: undefined,
    index: 0,
    actions: [NavigationActions.navigate({ routeName: 'YourScreen' })],
});
navigation.dispatch(resetAction);

Когда вы устанавливаете ключ на неопределенное значение, навигатор использует фактический стек, а не корень.

0 голосов
/ 31 августа 2018

Существует проблема с субактивными действиями , сбрасываемыми внутри стека , которые можно увидеть здесь

Поэтому обходной путь для этой проблемы - заключить createBottomTabNavigator в createStackNavigator в headerMode: none для достижения желаемого эффекта.

информация

При добавлении StackNavigator , вложенного непосредственно в DrawerNavigator , подэтапы будут сброшены только к определенному StackNavigator и не будут влиять на дочерний экран. состояния, поэтому он не выдаст ошибку, как указано в коде 

if (route.index !== undefined && route.index !== 0) {
   subAction = NavigationActions.reset({
   index: 0,
   actions: [
      NavigationActions.navigate({
      routeName: route.routes[0].routeName,
   }),
  ],
 });
}

MergedNavigator.js 

import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';

// tab navigator screens
import LoginScreen from '../screens/Login';
import TabOne from '../screens/tabA';
import TabTwo from '../screens/tabB';

//plain

export const stack = StackNavigator({
    DetailScreen:{screen:DetailScreen},
    MainScreen:{screen:MainScreen}
},{
    initialRouteName:'DetailScreen'
});

const secondStack = StackNavigator({
    RegisterScreen:{screen:RegisterScreen},
    ForgotScreen:{screen:ForgotScreen}
},{
    initialRouteName:'ForgotScreen'
})

export const Tabs = createBottomTabNavigator({
    Login:{screen:LoginScreen},
    TabOne:{screen:secondStack},
    TabTwo:{screen:TabTwo}
},{
    animationEnabled:true
})

const TabStack = createStackNavigator({ //... Adding the Stack here
  Tabs: {screen: Tabs}
}, {
  headerMode: 'none'
})

export const Drawer = DrawerNavigator({
    Tabs:{screen:Tab},
    Stack:{screen:stack}
})

Вот модифицированная закуска с включенным заголовком

...