我最初尝试将 react-native-elements 用于图标和其他组件。我按照文档进行设置，但图标在矩形中显示为十字形。在此期间，我通过运行“react-native link react-native-vector-icons”链接了矢量图标，并且还在项目的 android 文件夹的 setting.gradle 中添加了以下内容：
rootProject.name = 'Vida'
apply from: '../node_modules/react-native-unimodules/gradle.groovy'
includeUnimodulesProjects()
apply from: file("../node_modules/@react-native-community/cli-platform-
android/native_modules.gradle"); applyNativeModulesSettingsGradle(设置)
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new
File(rootProject.projectDir,
'../node_modules/react-native-vector-icons/android')
mainApplication.java 文件也需要更改，因此我将其更改为以下内容：
@Override
protected List<ReactPackage> getPackages() {
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new ModuleRegistryAdapter(mModuleRegistryProvider));
package.add(new RNGestureHandlerPackage()); // THis is the change I made for handling gestures.
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new VectorIconsPackage() // THis is the change for vector Icons
);
}
我还添加了
implementation project(':react-native-vector-icons')
implementation project(':react-native-gesture-handler')
构建.gradle 文件。
在我通过第一个“react-native start”和“react-native run-android”重新启动应用程序后，我在我的 android 模拟器中遇到了“null 不是对象（评估 'RNGestureHandlerModule.default.Direction'）”，之后我尝试在线搜索解决方案，有些说卸载并重新安装 react-native-gesture-handlers 会解决它，所以我尝试卸载并重新安装手势处理程序并尝试重新启动流星服务器并运行“react-native run-android”。但相反，我遇到了一个错误说：
C:\Vida\VidaApp@20\VidaArchive\android\app\src\main\java\blah\com\MainActivity.java:8:
com.swmansion.gesturehandler.react does not exist
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
^
C:\Vida\VidaApp@20\VidaArchive\android\app\src\main\java\blah\com\MainActivity.java:37:
find symbol
return new RNGestureHandlerEnabledRootView(MainActivity.this);
^
symbol: class RNGestureHandlerEnabledRootView
2 errors
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option output. Run
with --scan to get full insights.
* Get more help at https://help.gradle.org
eact does not exist
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;;
^ ivity.java:37:
C:\Vida\VidaApp@20\VidaArchive\android\app\src\main\java\blah\com\MainActivity.java:37: error: cannot
find symbol his);
return new RNGestureHandlerEnabledRootView(MainActivity.this);
^
symbol: class RNGestureHandlerEnabledRootView
2 errors
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.
-debug option
* 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
BUILD FAILED in 38s
t-native-commu
at checkExecSyncError (child_process.js:635:11)
at execFileSync (child_process.js:653:15) tive-community
at runOnAllDevices (C:\Vida\VidaApp@20\VidaArchive\node_modules\@react-native-community\cli-platform-
android\build\commands\runAndroid\runOnAly\cli-platformlDevices.js:94:39)
at buildAndRun (C:\Vida\VidaApp@20\VidaArchive\node_modules\@react-native-community\cli-platform-
android\build\commands\runAndroid\index.js:17dules\react-na9:41)
at C:\Vida\VidaApp@20\VidaArchive\node_modules\@react-native-community\cli-platform-
android\build\commands\runAndroid\index.js:133:12
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async Command.handleAction (C:\Vida\VidaApp@20\VidaArchive\node_modules\react-
native\node_modules\@react-native-community\cli\build\index.js:182:9)
此外，当我尝试卸载手势处理程序时，Visual Studio 崩溃了，我不得不再次打开，在我启动 Vscode 后我重新安装了手势处理程序，它显示以下错误：
$ ...include ':react-native-gesture-handler'
bash: ...include: command not found
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: file-uri-to-path@1.0.0 (node_modules\file-uri-to-
path):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, rename
'C:\Vida\VidaApp@20\VidaArchive\node_modules\file-uri-to-path' ->
'C:\Vida\VidaApp@20\VidaArchive\node_modules\.file-uri-to-path.DELETE'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: nan@2.14.2 (node_modules\nan):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, rename
'C:\Vida\VidaApp@20\VidaArchive\node_modules\nan'
-> 'C:\Vida\VidaApp@20\VidaArchive\node_modules\.nan.DELETE'
npm ERR! code ENOENT
npm ERR! syscall rename
npm ERR! path C:\Vida\VidaApp@20\VidaArchive\node_modules\@egjs\hammerjs
npm ERR! dest C:\Vida\VidaApp@20\VidaArchive\node_modules\@egjs\.hammerjs.DELETE
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, rename
'C:\Vida\VidaApp@20\VidaArchive\node_modules\@egjs\hammerjs' ->
'C:\Vida\VidaApp@20\VidaArchive\node_modules\@egjs\.hammerjs.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Shiri\AppData\Roaming\npm-cache\_logs\2020-10-31T07_52_44_306Z-debug.log
目前我的 package.json 文件如下：
{
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web"
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.10",
"@react-native-community/netinfo": "^5.8.1",
"@redux-offline/redux-offline": "^2.6.0-expo.0",
"bootstrap": "^4.5.2",
"expo": "~37.0.3",
"expo-linear-gradient": "~8.1.0",
"expo-screen-orientation": "^1.0.0",
"expo-splash-screen": "^0.2.3",
"expo-updates": "~0.2.0",
"pusher-js": "^7.0.0",
"react": "~16.9.0",
"react-bootstrap": "^1.3.0",
"react-dom": "~16.9.0",
"react-native": "~0.61.5",
"react-native-agora": "^2.9.1-alpha.7",
"react-native-banner-carousel": "^1.0.3",
"react-native-country-list": "^1.0.10",
"react-native-elements": "^3.0.0-alpha.1",
"react-native-gesture-handler": "~1.6.0",
"react-native-material-dropdown": "^0.11.1",
"react-native-material-textfield": "^0.16.1",
"react-native-reanimated": "~1.7.0",
"react-native-rename": "^2.4.1",
"react-native-safe-area-context": "^1.0.0",
"react-native-screens": "^2.7.0",
"react-native-snap-carousel": "^3.9.0",
"react-native-svg": "11.0.1",
"react-native-unimodules": "~0.9.0",
"react-native-vector-icons": "^7.0.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.3.9",
"react-navigation-stack": "^2.5.1",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"socket.io-client": "^2.3.0"
},
"devDependencies": {
"@babel/core": "^7.8.6",
"babel-jest": "~25.2.6",
"babel-preset-expo": "~8.1.0",
"jest": "~25.2.6",
"react-test-renderer": "~16.9.0"
},
"private": true,
"name": "VidaArchive",
"version": "1.0.0"
}
我需要尽早解决这个问题，因为我需要向我的前辈展示我的工作。我也是 react-native 环境的新手，因此，我担心的是：
- 如何为 android 设置和使用 react-native 矢量图标（以及第三方库）？
- 这是什么问题，RNGestureHandler？
- 它说 Package react-native-gesture-handler 已被忽略，因为它包含无效原因：找不到模块'react-native-gesture-handler\package.json'。这是什么，是什么原因造成的，我该如何解决？