Использование response-navigation 3. * Как перейти с экрана на тот же уровень BottomTabNavigator?

Question

Мне попалось нативное приложение с такой структурой:

• . / App.js
• . /Screens / AppNavigator.js
• . /Screens / SignInScreen.js
• . /screens / HomeScreen.js
• . /screens / FavoritesScreen.js

App.js:

import { createAppContainer } from "react-navigation";
import AppNavigator from './screens/AppNavigator';
const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
  render() {
    return (
      <View>
        <AppContainer/>
      </View>
    );
  }
}

экранов / AppNavigator.js:

import { createSwitchNavigator, createBottomTabNavigator } from 'react-navigation';
import SignInScreen from './SignInScreen';
import HomeScreen from './HomeScreen';
import FavoritesScreen from './FavoritesScreen';

const AppBottomTabNavigator = createBottomTabNavigator({ 
    Home: {
        screen: HomeScreen
    },
    Favorites: {
        screen: FavoritesScreen
    }
},
{
    initialRouteName: 'Home',
});

export default createSwitchNavigator(
    {
        App: AppBottomTabNavigator,
        Auth: SignInScreen
    },
    {
        initialRouteName: 'SignInScreen',
    }
);

экранов / SignInScreen.js:

export default class SignInScreen extends React.Component {  
    render() {
        return (
            <View>
                <Button title="Continue w/o sing in..." onPress={this.toApp} />
            </View>
        );
    }

    toApp = () => {
        this.props.navigation.navigate('App'); // from here I try to navigate to Home screen
    };
}

И когда я пытаюсь перейти к HomeScreen из SignInScreen, я вижу белый экран вместо HomeScreen, хотя вседругая навигация работает хорошо.

Проблема не возникает, если в screen / AppNavigator.js я меняю createBottomTabNavigator на createSwitchNavigator, понятия не имею почему.Проблема также не появляется, если в экранах / AppNavigator.js я перехожу непосредственно к HomeScreen или FavoritesScreen вместо AppBottomTabNavigator.Я нашел эту ветку на github , но, насколько я понимаю, она не связана со мной, потому что и AppBottomTabNavigator, и SignInScreen являются дочерними элементами AppNavigator.

Итак, что же происходит с моим кодом?

Answer 1

Проблема в файле de App.js. По какой-то причине вы не можете поместить BottomTabNavitation в компонент View, поэтому удалите его. Как это:

export default class App extends React.Component {
  render() {
    return (
        <AppContainer/>
    );
  }
}

Вам также следует изменить параметр initialRoutName в createSwitchNavigator. Вы должны поставить routName, в этом случае Auth.

export default createSwitchNavigator(
    {
        App: AppBottomTabNavigator,
        Auth: SignInScreen
    },
    {
        initialRouteName: 'Auth',
    }
);