react-native - 使用 react-navigation 3.* 如何从屏幕导航到同一级别的 BottomTabNavigator？

Question

我得到了具有这种结构的本机应用程序：

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

应用程序.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
    };
}

当我尝试从 SignInScreen 导航到 HomeScreen 时，我看到的是白屏而不是 HomeScreen，尽管所有其他导航都运行良好。

如果在 screen/AppNavigator.js 中我将 createBottomTabNavigator 更改为 createSwitchNavigator，则不会出现此问题，但不知道为什么。如果在 screen/AppNavigator.js 中我直接导航到 HomeScreen 或 FavoritesScreen 而不是 AppBottomTabNavigator，也不会出现问题。我在 github 上找到了这个线程，但据我所知，它与我无关，因为 AppBottomTabNavigator 和 SignInScreen 都是 AppNavigator 的子级。

那么，我的代码有什么问题？

标签： react-nativereact-navigation

Answer 1

问题出在 de App.js 中。由于某种原因，您不能将 BottomTabNavitation 放在视图组件中，因此请删除。像这样：

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

您还应该更改 createSwitchNavigator 中的参数 initialRoutName。您必须输入 routName，在本例中为 Auth。

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