React-Native使用react-navigation实现Drawer Navigator报错求助

我帮你排查了代码里的问题，都是几个容易忽略的小错误导致的报错，咱们一步步来修复：

错误点1：组件名拼写错误 #

你把React Native的ScrollView组件写成了ScroollView（多了一个字母o），React Native找不到这个不存在的组件，肯定会抛出错误，得改成正确的ScrollView。

错误点2：导入语句语法混乱 #

导入SafeAreaView的时候后面多了一串无效内容[enter image description here][3]，这会直接导致语法解析失败，必须删掉这部分，正确导入SafeAreaView。

额外注意点 #

记得检查./images/perfil.png这个图片路径是否正确，如果图片文件不存在或者路径写错，也会导致运行时报错。

修复后的完整代码 #

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, ScrollView, Dimensions, Image, SafeAreaView } from "react-native";
import { createDrawerNavigator, createAppContainer, DrawerItems } from "react-navigation";
import LoginScreen from "./Screens/Login/LoginScreen";
import HomeScreen from "./Screens/Home/HomeScreen";

type Props = {};
export default class App extends Component<Props> {
  render() {
    return <Apps />;
  }
}

const CustomDrawerComponent = props => (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={{ height: 150, backgroundColor: "white", alignItems: "center", justifyContent: "center" }}>
      <Image source={require("./images/perfil.png")} style={{ height: 120, width: 120, borderRadius: 60 }} />
    </View>
    <ScrollView>
      <DrawerItems {...props} />
    </ScrollView>
  </SafeAreaView>
);

const AppDrawerNavigator = createDrawerNavigator(
  {
    Home: HomeScreen,
    Settings: LoginScreen
  },
  { contentComponent: CustomDrawerComponent }
);

const Apps = createAppContainer(AppDrawerNavigator);

const styles = StyleSheet.create({});

修复完成后，重启Metro Bundler，重新运行Android模拟器里的项目，侧边抽屉菜单应该就能正常工作了。如果还是有报错，确认一下是否安装了react-navigation-drawer依赖（React Navigation v4版本需要单独安装这个包），执行npm install react-navigation-drawer或者yarn add react-navigation-drawer即可。

内容的提问来源于stack exchange，提问作者Leandro Ribeiro