我对使用 React Native 的移动开发相当陌生。我启动了一个裸露的 React Native 项目,目前在尝试安装 expo 时遇到错误,因此我可以使用 expo 相机库。 按照文档: 1.https://docs.expo.dev/bare/installing-expo-modules/#usage 2.https://github.com/expo/expo/tree/sdk-48/packages/expo-camera)
我目前停留在第 1 步:
npx expo install expo-constants
npx expo run:android
我收到以下错误:
› Building app...
Configuration on demand is an incubating feature.
FAILURE: Build failed with an exception.
* Where:
Build file 'C:\Users\sulei\Desktop\ReactNativeProjects\Instagram\node_modules\expo-application\android\build.gradle' line: 40
* What went wrong:
A problem occurred evaluating project ':expo-application'.
> Could not set unknown property 'classifier' for task ':expo-application:androidSourcesJar' of type org.gradle.api.tasks.bundling.Jar.
* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
* Get more help at https://help.gradle.org
Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.
You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.
See https://docs.gradle.org/8.0.1/userguide/command_line_interface.html#sec:command_line_warnings
BUILD FAILED in 4s
5 actionable tasks: 5 up-to-date
Error: C:\Users\sulei\Desktop\ReactNativeProjects\Instagram\android\gradlew.bat exited with non-zero code: 1
Error: C:\Users\sulei\Desktop\ReactNativeProjects\Instagram\android\gradlew.bat exited with non-zero code: 1
at ChildProcess.completionListener (C:\Users\sulei\Desktop\ReactNativeProjects\Instagram\node_modules\@expo\spawn-async\build\spawnAsync.js:52:23)
at Object.onceWrapper (node:events:628:26)
at ChildProcess.emit (node:events:513:28)
at cp.emit (C:\Users\sulei\Desktop\ReactNativeProjects\Instagram\node_modules\@expo\spawn-async\node_modules\cross-spawn\lib\enoent.js:34:29)
at maybeClose (node:internal/child_process:1091:16)
at ChildProcess._handle.onexit (node:internal/child_process:302:5)
...
at Object.spawnAsync [as default] (C:\Users\sulei\Desktop\ReactNativeProjects\Instagram\node_modules\@expo\spawn-async\build\spawnAsync.js:17:21)
at spawnGradleAsync (C:\Users\sulei\Desktop\ReactNativeProjects\Instagram\node_modules\@expo\cli\build\src\start\platforms\android\gradle.js:72:46)
at Object.assembleAsync (C:\Users\sulei\Desktop\ReactNativeProjects\Instagram\node_modules\@expo\cli\build\src\start\platforms\android\gradle.js:52:18)
at runAndroidAsync (C:\Users\sulei\Desktop\ReactNativeProjects\Instagram\node_modules\@expo\cli\build\src\run\android\runAndroidAsync.js:31:24)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
android目录下的build.gradle文件:
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
ext {
buildToolsVersion = "33.0.0"
minSdkVersion = 21
compileSdkVersion = 33
targetSdkVersion = 33
// We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
ndkVersion = "23.1.7779620"
}
repositories {
google()
mavenCentral()
}
dependencies {
classpath("com.android.tools.build:gradle")
classpath("com.android.tools.build:gradle:7.4.1")
classpath("com.facebook.react:react-native-gradle-plugin")
}
}
allprojects {
repositories {
jcenter() {
content {
includeModule("com.yqritc", "android-scalablevideoview")
}
}
}
}
settings.gradle 文件:
rootProject.name = 'Instagram'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
applyNativeModulesSettingsGradle(settings)
include ':app'
includeBuild('../node_modules/@react-native/gradle-plugin')
apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle")
useExpoModules()
MainActivity.java 文件:
package com.instagram;
import expo.modules.ReactActivityDelegateWrapper;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
import com.facebook.react.defaults.DefaultReactActivityDelegate;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript. This is used to schedule
* rendering of the component.
*/
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegateWrapper(this, BuildConfig.IS_NEW_ARCHITECTURE_ENABLED, new DefaultReactActivityDelegate(
this,
getMainComponentName(),
// If you opted-in for the New Architecture, we enable the Fabric Renderer.
DefaultNewArchitectureEntryPoint.getFabricEnabled(), // fabricEnabled
// If you opted-in for the New Architecture, we enable Concurrent React (i.e. React 18).
DefaultNewArchitectureEntryPoint.getConcurrentReactEnabled() // concurrentRootEnabled
));
}
}
MainApplication.java 文件
package com.instagram;
import android.content.res.Configuration;
import expo.modules.ApplicationLifecycleDispatcher;
import expo.modules.ReactNativeHostWrapper;
import android.app.Application;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
import com.facebook.react.defaults.DefaultReactNativeHost;
import com.facebook.soloader.SoLoader;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost =
new ReactNativeHostWrapper(this, new DefaultReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
return packages;
}
@Override
protected String getJSMainModuleName() {
return "index";
}
@Override
protected boolean isNewArchEnabled() {
return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
}
@Override
protected Boolean isHermesEnabled() {
return BuildConfig.IS_HERMES_ENABLED;
}
});
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
// If you opted-in for the New Architecture, we load the native entry point for this app.
DefaultNewArchitectureEntryPoint.load();
}
ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
ApplicationLifecycleDispatcher.onApplicationCreate(this);
}
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig);
}
}
我的package.json文件:
{
"name": "Instagram",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"expo": "^48.0.19",
"react": "18.2.0",
"react-native": "0.72.0",
"react-native-image-picker": "^5.6.0",
"react-native-vector-icons": "^9.2.0",
"react-native-video": "^5.2.1",
"expo-constants": "~14.2.1"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/eslint-config": "^0.72.2",
"@react-native/metro-config": "^0.72.6",
"@tsconfig/react-native": "^3.0.0",
"@types/metro-config": "^0.76.3",
"@types/react": "^18.0.24",
"@types/react-native-vector-icons": "^6.4.13",
"@types/react-native-video": "^5.0.14",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.76.5",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4"
},
"engines": {
"node": ">=16"
}
}
我已尝试了文档中列出的所有步骤,但我不确定我缺少什么。需要帮助
您可以通过在终端中运行以下命令来尝试自动安装:
npx install-expo-modules@latest
如果此命令成功,您可以继续安装所需的任何 Expo 软件包。