不同屏幕之间的“反应导航”，出现500错误

Question

我遵循了文档，但是仍然遇到了可怕的500错误 我在下面的屏幕中添加了代码，请告知我所缺少的内容。  app.js页面已加载到index.js

https://snack.expo.io/@brody182/tab-navigation-with-screen-components

react-native@.55 react-navigation@2.5.2

App.js

import React, { Component } from 'react';
import  AppNavigator from './components/app.navigator';
import { StyleProvider } from 'native-base';
import getTheme from './native-base-theme/components';
import CustomTheme from './native-base-theme/variables/custom.material';

export default class App extends Component {
  render() {
    return (

      <StyleProvider style={getTheme(CustomTheme)}>
      <AppNavigator/>
      </StyleProvider>

    );
  }
}

app.navigator.js

import React from 'react';

import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation'; // Version can be specified in package.json
import HomeScreen from './components/HomeScreen';
import SettingsScreen from './components/SettingsScreen';
import DetailsScreen from './components/DetailsScreen';



const HomeStack = StackNavigator({
  Home: { screen: HomeScreen },
  Details: { screen: DetailsScreen },
});

const SettingsStack = StackNavigator({
  Settings: { screen: SettingsScreen },
  Details: { screen: DetailsScreen },
});

export default TabNavigator(
  {
    Home: { screen: HomeStack },
    Settings: { screen: SettingsStack },
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        } else if (routeName === 'Settings') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Icon name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
    animationEnabled: false,
    swipeEnabled: false,
  }
);

除名称外，屏幕页面均相似 settingsScreen.js，detailScreen.js，homeScreen.js

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export default class SettingsScreen extends Component {
    render() {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Settings!</Text>
          <Button
            title="Go to Home"
            onPress={() => this.props.navigation.navigate('Home')}
          />
          <Button
            title="Go to Details"
            onPress={() => this.props.navigation.navigate('Details')}
          />
        </View>
      );
    }
  }