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>
    );
  }
}

screens / 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',
    }
);

screens / 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，尽管所有其他导航效果都很好。

如果在screens / AppNavigator.js中我将createBottomTabNavigator更改为createSwitchNavigator，则不会出现问题，不知道为什么。如果在screens / AppNavigator.js中直接导航到HomeScreen或“收藏夹屏幕”而不是AppBottomTabNavigator，也不会出现问题。我找到了this thread on github，但是据我了解，这与我无关，因为AppBottomTabNavigator和SignInScreen都是AppNavigator的子代。

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

Answer 1

问题出在de App.js中。由于某些原因，您无法将BottomTabNavitation放置在View组件内，因此将其删除。像这样：

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

还应该在createSwitchNavigator中更改参数initialRoutName。您必须输入routName，在这种情况下为Auth。

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

使用反应导航3. *如何从屏幕导航到同一级别的BottomTabNavigator？

1 个答案: