获取此错误: Error: bundle 未能成功: Error: 无法解析模块“ response-national-safe-area-context”

在运行我的应用程序后,我得到了这个错误:

错误: 无法解析来自 node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js的模块 react-native-safe-area-context: 无法在项目中找到反应-本机-安全-区域-上下文。

但是和我以前的样带一样,效果非常好。

我不知道我在这里做错了什么。请检查我的代码:

安装:

  1. 返回本地导航和手势处理程序:

npm install --save react-navigation

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

  1. 反应堆原生堆栈:

npm install --save react-navigation-stack

App.js

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import FirstOptionsPage from "./FirstOptionsPage";


const MainNavigator = createStackNavigator(
{
FirstOptions: FirstOptionsPage
},
{
defaultNavigationOptions: {
headerStyle: {
// backgroundColor: '#28F1A6',
elevation: 0,
shadowOpacity: 0
},
headerTintColor: "#ca375e",
headerTitleStyle: {
fontWeight: "bold",
color: "#161616"
}
}
}
);


const App = createAppContainer(MainNavigator); // For setting Navigation Stack
export default App;

还有 FirstOptionsPage.js:

import React from "react";
import {
SafeAreaView,
StyleSheet,
View,
Text,
ScrollView,
Switch
} from "react-native";


export default class FirstOptionsPage extends React.Component {
static navigationOptions = {
title: "Preferences"
};


constructor(props) {
super(props);
this.state = {
switch1Value: false
};
}


toggleSwitch1 = value => {
this.setState({ switch1Value: value });
console.log("Switch 1 is: " + value);
};


render() {
const { navigate } = this.props.navigation;
return (
<SafeAreaView style={styles.mainContainerStyle}>
<View style={styles.subContainerStyle}>
<Text style={styles.subtitleTextStyle}>Someone likes my post</Text>
<View style={styles.switchStyle}>
<Switch
onValueChange={this.toggleSwitch1}
value={this.state.switch1Value}
thumbColor={MAGENTA_COLOR_CODE}
trackColor={{
false: GREY_COLOR_CODE,
true: DARK_GREY_COLOR_CODE
}}
/>
</View>
</View>
</SafeAreaView>
);
}
}

我是反应原住民的新手,我该怎么补救?

107210 次浏览

我认为问题在于 SafeAreaView,对于新的本地反应版本,它已经迁移到了 react-native-community/react-native-safe-area-view。如果你想使用 SafeAreaView,你应该先安装它。

新的用途是这样的:

import SafeAreaView from 'react-native-safe-area-view';


export default function MyAwesomeApp() {
return (
<SafeAreaView style=\{\{ flex: 1 }}>
<View style=\{\{ flex: 1 }}>
<Text>
Look, I'm safe! Not under a status bar or notch or home indicator or
anything! Very cool
</Text>
</View>
</SafeAreaView>
);
}


你可使用以下命令安装:
yarn add react-native-safe-area-view react-native-safe-area-context.

如果你不使用自动链接,你也必须链接它。有关它的详细信息,见此 链接

我认为你错过了链接依赖于你的项目,所以你可以尝试如下:

反应天然0.6或更高:

在 iOS 系统上,确保安装了 Cocoapods并运行:

cd ios
pod install
cd ..

使用 React 原生0.59或更低的版本:

react-native link react-native-safe-area-context

全部复制粘贴到终端

expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens

为我工作

运行以下命令后:

npm i react-native-safe-area-view react-native-safe-area-context &&
react-native link react-native-safe-area-context

它提示我一个关于蒙版视图的错误,所以我还必须运行 npm i @react-native-community/masked-view,然后我的代码现在可以成功地运行在 Android 物理设备上。

感谢 LenoarodGautam Shrivastav指出了正确的方向。

运行以下命令:

expo install react-native-safe-area-context

expo将选择正确的版本,然后安装它。

使用推荐的 npm i 反应-导航-堆栈来解决这个错误

直接从项目目录启动 Metro Bundler 对我来说很有用。

# 干净的缓存 rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; watchman watch-del-all

# 直接启动城市快车 react-native start

# 现在在另一个标签中运行 react-native run-androidreact-native run-ios

这是一个有点有趣的,我想添加导航,所以我添加

Npm install ——保存反应——导航

我必须补充一点:

Expo 安装 response-本机-手势-处理程序 response-本机-复活

然后我得到了

无法解析“反应-本机-安全区域-上下文” 于是我补充道:

安装反应-导航-堆栈

Expo 安装 response-原生安全区域-视图 response-原生安全区域-上下文

然后我得到了

捆绑失败: 错误: 无法解析模块 @react-native-community/masked-view

因此,我搜索了掩码视图(根据其 git 文档,世博会目前不支持该视图)。然后我发现我可以用:

Expo install@颅本社区/蒙面视图 可行与否:)

因此,从现在开始,我在所有反应本机项目的开始使用以下命令,以便能够正确使用导航:

Npm install ——保存反应——导航

Expo install response-本机-手势-处理程序 response-本机-复活的 response-导航-堆栈

Expo 安装 response-原生安全区域-视图 response-原生安全区域-上下文

Expo install@颅本社区/蒙面视图

安装以下两个,

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

这是我的工作

分两步:

  1. Npm i-g 世博会
  2. Expo install response ——本机-手势-处理程序 response-本机-复活的 response-本机-屏幕 response-本机-安全区-上下文@response-本机-社区/蒙版-视图

要使用 React 导航,您需要运行以下命令

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

或者

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

谢谢你的解决方案,它帮助我解决了这个问题

  1. npm i -g expo

  2. expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

  3. react-native start

如果您正在使用@response-national/stack,那么在安装它之前使用以下命令来安装它的依赖项

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

阅读 https://reactnavigation.org/docs/getting-started/上的文档

可能有多种解决方案,对我来说,这是本地反应造成的错误。因此,在删除节点模块和其他命令之前,请检查应用程序中所有 .js文件中的 imports。 在我的例子中,import { TestScheduler } from 'jest';这一行自动添加到。Js 文件。我删除了这一行,它为我工作。

运行以下命令: npm install response-national-reanimed response-national-徒手操作处理程序 response-徒手屏幕 response-徒手屏幕显示-徒手屏幕显示-徒手屏幕显示-徒手屏幕显示-徒手屏幕显示-徒手屏幕显示-徒手屏幕显示-徒手屏幕显示-徒手屏幕显示-徒手屏幕

我认为这是由于世博会和安全区上下文版本对不兼容。 你应该试试这个:

Npm 卸载反应-本机-安全区域-上下文

之后,你运行这个:

Expo 的安装反应-本地-安全-区域-上下文

安装 “@response-local-community/mond-view” “反应-本地-安全区-背景”

对我有用

是我干的 纱线 add@response-local-community/ 遮蔽-view 纱线添加反应-本地-安全区-上下文 它给我另一个错误 < strong > import type { ScreenProps } ,来自‘ response-national-screen’

那就是了 纱线添加反应-自然屏蔽 一切顺利