React-Native使用react-navigation导航遇到的Unable to resolve SafeAreaContext 问题及解决办法

1、如何使用react-navigation

1、安装依赖包

npm install --save react-native-gesture-handler react-native-reanimated react-native-screens react-navigation react-navigation-stack react-navigation-tabs

或是

yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-navigation react-navigation-stack react-navigation-tabs

这几个包是依赖包
eact-native-gesture-handler 、react-native-reanimated、 react-native-screens

这几个包是主要的包
react-navigation react-navigation-stack react-navigation-tabs

我的react-native是0.63.2版本，

注意，我的react-navigation安装的是4.x的版本。据说5.x的版本，又是另外的兼容性错误问题。我安装的时候，默认的就是4.x的版本，5.x的版本，错误，我没有遇到过。

这个时候跑起来，会报错。

2、运行报错，需要安装其他的依赖包

Unable to resolve SafeAreaContext from react-native-safe-area-context
大概原因是react-navigation和SafeAreaView直接的问题吧。

我在stackflow上，找到老外的解决办法。

补充安装需要的依赖。

npm install --save react-native-safe-area-context  eact-native-safe-area-view @react-native-community/masked-view

然后就可以真机运行了。
@react-native-community/masked-view这个包，是安装了前面两个包后，控制台报错，提示需要安装这个包才行。在老外的评论下面，也找到了说需要安装这个包。

附上老外的链接：
https://stackoverflow.com/questions/59560312/getting-this-error-error-bundling-failed-error-unable-to-resolve-module-rea

还有一个这个可以查看https://kb.kutu66.com/react-native/post_14861386

3、路由跳转

不带参数跳转

 <Button
  title="Go to Details"
   onPress={() => this.props.navigation.navigate('Details')}
 />

带参数跳转

 <Button
    title="Go to Details"
    onPress={() => {
      this.props.navigation.navigate('Details', {
        itemId: 86,
        otherParam: 'anything you want here',
      });
    }}
  />

在跳转后的页面获取传递过来的参数

  render() {
    const {navigation} = this.props;
    return (
      <View>
        <Text>个人中心</Text>
        <Text>
          itemId: {JSON.stringify(navigation.getParam('itemId', '86'))}
        </Text>
        <Text>
          otherParam:
          {JSON.stringify(navigation.getParam('otherParam', 'anything you want here'))}
        </Text>
      </View>
    );
  }

以及其他关于导致的学习demo，可以查看：
关于顶部导航
https://www.jianshu.com/p/8021f123ad72
关于tab标签导航
https://www.jianshu.com/p/c86e211e742b