导入导航包或其他屏幕时，代码无法运行

Question

当我使用import {createStackNavigator} from 'react-navigation';时 或导入任何屏幕或js页面，例如：

 import Karate from './screens/Karate';

在App.js中，我的应用程序无法正常工作，并出现红屏 有错误

  

开发服务器返回响应错误代码：500

当我删除导入行进行导航时，应用程序运行正常

开发服务器返回响应错误代码：500

URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false&revisionId=bc456ed317c1e4fb

App.js代码是

/**
 * @format
 */
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Image,TouchableOpacity} from 'react-native';
// import {createStackNavigator} from 'react-navigation';
//  import Karate from './screens/Karate';
//  import Takewando from './screens/Takewando';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {

  render() {


    return (

      <View>


                        <View style={{alignItems: 'center',justifyContent: 'center' }}>

                        <Image
                               style={{width: 200, height: 200}}
                          source={require('./fimg/takewando.png')}/>

                       </View>

                       <View style={btnstyles.takebtn}>
                       <TouchableOpacity>

                                                    <Text style = {btnstyles.takbtntext}>Takewando</Text>

                                 </TouchableOpacity>
                      </View>

                      <View style={{alignItems: 'center',justifyContent: 'center'} }>
                      <Image
                             style={{width: 200, height: 200,bottom:-50 }}
                        source={require('./fimg/karate.png')}/>


                      </View>


                      <View style={btnstyles.karbtn}>
                                 <TouchableOpacity>
                                                    <Text style = {btnstyles.takbtntext}>Karate</Text>
                                 </TouchableOpacity>
                      </View>

            </View>

    );
  }
}
const btnstyles=StyleSheet.create({
  takebtn:{
   //backgroundColor: 'red',

   backgroundColor: '#DDDDDD',
  // marignRight:5,
   //marignLeft:5,
   borderColor:'#FE434C',
   borderWidth:2,
   borderRadius:7,
   alignItems:'stretch',
  //position: 'absolute',

  bottom:-30,
  padding: 5,
  //width:150,
  //paddingHorizontal: 30,
  //paddingVertical: 5,
},
karbtn:{
  //backgroundColor: 'red',
  backgroundColor: '#DDDDDD',
 // marignRight:5,
  //marignLeft:5,
  borderColor:'#007aff',
  borderWidth:2,
  borderRadius:7,
  alignItems:'stretch',
  bottom:-100,
  padding: 5
},
takbtntext:{
  alignSelf: 'center',
   color: 'black',
   fontSize:20,
   fontWeight:'bold',
   textAlign:'center'
}

});