Reactjs ReactNative-不变冲突：RequirementActiveComponent:"；RNCSafeareview“；在UI管理器中找不到

我已经用expo bare工作流创建了一个react原生包。我还添加了一些包，比如

npm install --save react-navigation
npm install --save react-native-gesture-handler
npm install --save react-navigation-stack

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

npm install --save react-native-gesture-handler
npm install --save react-native-reanimated 

下面是我的App.js文件

import React from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  Button,
  StatusBar,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import { createStackNavigator } from "react-navigation-stack";

class SignInScreen extends React.Component {
  static navigationOptions = {
    title: 'Please sign in',
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title="Sign in!" onPress={this._signInAsync} />
      </View>
    );
  }

  _signInAsync = async () => {
    await AsyncStorage.setItem('userToken', 'abc');
    this.props.navigation.navigate({
      routeName: 'Home',
      key: 'Home',
      params: { userInfo: 'lol' },
    });
  };
}

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome to the app!',
  };

  componentDidMount() {
    // alert(JSON.stringify(this.props.navigation.state.params))
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>{JSON.stringify(this.props.navigation.state.params)}</Text>
        <Button title="Show me more of the app" onPress={this._showMoreApp} />
        <Button title="Actually, sign me out :)" onPress={this._signOutAsync} />
      </View>
    );
  }

  _showMoreApp = () => {
    this.props.navigation.navigate('Other');
  };

  _signOutAsync = async () => {
    await AsyncStorage.clear();
    this.props.navigation.navigate('Auth');
  };
}

class OtherScreen extends React.Component {
  static navigationOptions = {
    title: 'Lots of features here',
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title="I'm done, sign me out" onPress={this._signOutAsync} />
        <StatusBar barStyle="default" />
      </View>
    );
  }

  _signOutAsync = async () => {
    await AsyncStorage.clear();
    this.props.navigation.navigate('Auth');
  };
}

class AuthLoadingScreen extends React.Component {
  constructor() {
    super();
    this._bootstrapAsync();
  }

  // Fetch the token from storage then navigate to our appropriate place
  _bootstrapAsync = async () => {
    const userToken = await AsyncStorage.getItem('userToken');

    // This will switch to the App screen or Auth screen and this loading
    // screen will be unmounted and thrown away.
    if (userToken) {
      this.props.navigation.navigate({
        routeName: 'Home',
        key: 'Home',
        params: { userInfo: 'hello world' },
      });
    } else {
      this.props.navigation.navigate('SignIn');
    }
  };

  // Render any loading content that you like here
  render() {
    return (
      <View style={styles.container}>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const AppStack = createStackNavigator(
  { Home: HomeScreen, Other: OtherScreen },
  { initialRouteKey: 'Home', initialRouteName: 'Home' }
);
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  },
),
);

从“React”导入React；
进口{
活动指示器，
异步存储，
按钮
状态栏，
样式表，
文本，
看法
}从“反应本机”；
从“react navigation”导入{createSwitchNavigator，createAppContainer}；
从“反应导航堆栈”导入{createStackNavigator}；
类标志屏幕扩展了React.Component{
静态导航选项={
标题：“请登录”，
};
render（）{
返回(
);
}
_signInAsync=async（）=>{
等待AsyncStorage.setItem（'userToken'，'abc'）；
this.props.navigation.navigate({
routeName:“家”，
钥匙：“家”，
参数：{userInfo:'lol'}，
});
};
}
类主屏幕扩展了React.Component{
静态导航选项={
标题：“欢迎使用该应用！”，
};
componentDidMount（）{
//警报（JSON.stringify（this.props.navigation.state.params））
}
render（）{
返回(
{JSON.stringify（this.props.navigation.state.params）}
);
}
_showMoreApp=（）=>{
this.props.navigation.navigate（'Other'）；
};
_signOutAsync=async（）=>{
等待异步存储。清除（）；
this.props.navigation.navigate（'Auth'）；
};
}
类OtherScreen扩展React.Component{
静态导航选项={
标题：“这里有很多特色”，
};
render（）{
返回(
);
}
_signOutAsync=async（）=>{
等待异步存储。清除（）；
this.props.navigation.navigate（'Auth'）；
};
}
类AuthLoadingScreen扩展了React.Component{
构造函数（）{
超级（）；
这个。_bootstrapAsync（）；
}
//从存储器中取出令牌，然后导航到适当的位置
_bootstrapAsync=async（）=>{
const userToken=await AsyncStorage.getItem（'userToken'）；
//这将切换到应用程序屏幕或身份验证屏幕，并进行此加载
//屏幕将被卸下并丢弃。
if（userToken）{
this.props.navigation.navigate({
routeName:“家”，
钥匙：“家”，
参数：{userInfo:'hello world'}，
});
}否则{
this.props.navigation.navigate（'sign'）；
}
};
//在此处呈现您喜欢的任何加载内容
render（）{
返回(

请提出解决办法

另外，我想知道如何决定哪些软件包将与reactnative cli、expo-managed cli、expo-bare cli一起使用

谢谢