[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fs7SbkIEfA_eiXBGLfTx3dabf04g8IJe0kaElVqwq6u4":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":12,"notice":12,"visitCount":28,"commentCount":29,"keywords":30},46,"2024-01-30T14:21:04.528Z","iOS和Android原生工程集成React Native","我早年记录的笔记，仅供参考哈。\n# 一、iOS原生集成react-native\n1. mkdir ssa_manage_app\n2. cd ssa_manage_app\n3. mkdir ios\n4. cd ios\n5. 将iOS原生工程拖入iOS文件夹目录\n6. cd ..\n7. touch package.json 或者 npm init\n8.  vim package.json，输入\nhttp://reactnative.cn/docs/0.42/integration-with-existing-apps.html#content\n的package.json的内容，要求：\nreact-native : 0.42.0\nreact : 15.4.1\n9. cd ios， 修改cocoapods的podfile，引入react和yoga，参照\nhttp://reactnative.cn/docs/0.42/integration-with-existing-apps.html#content\n的podfile的内容，保存，并 pod update\n10. cd ..  ， 执行 npm install\n（如果没有安装react， npm install –g react@15.4.1，\n如果没有安装react-native， npm install –g react-native@0.42.0）\n11. react-native run-ios，如无异常，运行成功。\n\n异常问题：\n1. jschelpers/JavaScriptCore.h file not found\n\n解决方法：（链接：https://github.com/facebook/react-native/issues/13010）\nJust in case this help anyone, my version of cocoapods was 1.1.1 and not 1.2.0, I had to uninstall cocoapods and reinstall it again:\n```\nsudo gem uninstall cocoapods\nsudo gem install cocoapods\npod install\nbuild and enjoy\n```\n\n# 二、Android原生集成react-native\n1. cd ssa_manage_app；\n2. mkdir android\n3. 拷贝原生安卓代码（根目录下所有代码）到android目录下面\n4. 参照\n（http://reactnative.cn/docs/0.42/integration-with-existing-apps.html#content）\n修改，在android/build.gradle中，加入\n```\nmaven {\n            // All of React Native (JS, Android binaries) is installed from npm\n            url \"$rootDir/../node_modules/react-native/android\"\n        }\n```\n在android/app/build.gradle中，加入依赖\ncompile \"com.facebook.react:react-native:0.42.0\" // From node_modules.\n \n在AndroidManifest.xml中加入网络访问权限和dev配置\n \n5. 修改android/app/build.gradle中的applicationId为”com.ymq.badminton”；\n6. 使node.js脚本的启动和安装从原生工程的实际路径执行\n修改node_modules/react-natvie/local_cli/ runAndroid/ runAndroid.js，\n在function buildAndRun(args)中，加入applicationId变量获取，\n```\nonst applicationId = fs.readFileSync(\n       'app/build.gradle',\n       'utf8'\n    ).match(/applicationId \"(.+?)\"/)[1];\n```\n然后修改runOnSpecificDevice(args, cmd, packageName, adbPath);\n为runOnSpecificDevice(args, cmd, applicationId, adbPath);\n，\n修改runOnAllDevices(args, cmd, packageName, adbPath);\n为runOnAllDevices(args, cmd, applicationId, adbPath);\n\n在`function tryLaunchAppOnDevice(device, packageName, adbPath, mainActivity)`\n方法中，修改`const adbArgs = ['-s', device, 'shell', 'am', 'start', '-n', packageName + '/. ' + mainActivity];`\n为`const adbArgs = ['-s', device, 'shell', 'am', 'start', '-n', packageName + '/.activity.' + mainActivity];`\n\n在f`unction runOnAllDevices(args, cmd, packageName, adbPath)`\n方法中，修改\n`const fallbackAdbArgs = [\n          'shell', 'am', 'start', '-n', packageName + '/.MainActivity'\n        ];`\n为\n`const fallbackAdbArgs = [\n          'shell', 'am', 'start', '-n', packageName + '/.activity.MainActivity'\n        ];`\n\n7. cd ssa_manage_app\n8. react-native run-android\n\n异常问题：\n1. 检查android sdk的环境变量配置\necho $ANDROID_HOME\n查看输出的对应路径下是否含有sdk\n\n查看设备的连接情况\nadb devices\n\n2.\n`Scanning 432 folders for symlinks in /Users/hanweixing/Desktop/ssa_manage_app_1/node_modules (5ms)\nStarting JS server...\nBuilding and installing the app on the device (cd android && ./gradlew installDebug)...\nCould not install the app on the device, read the error above for details.\nMake sure you have an Android emulator running or a device connected and have set up your Android development environment:`\n\n[https://facebook.github.io/react-native/docs/android-setup.html](https://facebook.github.io/react-native/docs/android-setup.html)\n解决办法：（链接：[https://github.com/facebook/react-native/issues/8868](https://github.com/facebook/react-native/issues/8868)）\n\n> you might check the permissions on android/gradlew\nthey should be 755 not 644\nrun chmod 755 android/gradlew inside your app root folder\nthen run react-native run-android\nand it should work again.\n\n在 android/app/ 目录下面执行 chmod 755 gradlew\n\n3.\nFAILURE: Build failed with an exception.\n```\n* What went wrong:\nExecution failed for task ':app:transformClassesWithJarMergingForDebug'.\n> com.android.build.api.transform.TransformException: java.util.zip.ZipException: duplicate entry: okhttp3/internal/ws/RealWebSocket$1.class\n \n* Try:\nRun with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.\n \nBUILD FAILED\n \nTotal time: 9.079 secs\nCould not install the app on the device, read the error above for details.\nMake sure you have an Android emulator running or a device connected and have\nset up your Android development environment:\n```\n[https://facebook.github.io/react-native/docs/android-setup.html](https://facebook.github.io/react-native/docs/android-setup.html)\n解决方案：\n（https://github.com/facebook/react-native/issues/12646、\nhttps://github.com/square/okhttp/issues/3040#issuecomment-271364687）\n\n在android/app/build.gradle中，加入\n```\nconfigurations.all {     // OkHttp 3.5.0+ includes the websockets API, so we need this to prevent a conflict     exclude module: 'okhttp-ws' }\n```\n\n4.\nFAILURE: Build failed with an exception.\n```\n* What went wrong:\nExecution failed for task ':app:installDebug'.\n> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to finalize session : INSTALL_FAILED_CONFLICTING_PROVIDER: Package couldn't be installed in /data/app/com.ymq.min-1: Can't install because provider name com.ymq.min.AUTH_XGPUSH (in package com.ymq.min) is already used by com.ymq.badminton\n \n* Try:\nRun with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.\n \nBUILD FAILED\n \nTotal time: 1 mins 23.928 secs\nCould not install the app on the device, read the error above for details.\nMake sure you have an Android emulator running or a device connected and have\nset up your Android development environment:\nhttps://facebook.github.io/react-native/docs/android-setup.html\n```\n解决方法：\n在app/build.gradle中，修改applicationId为com.ymq.badminton\n\n5.\nBUILD SUCCESSFUL\n```\nTotal time: 1 mins 9.594 secs\nRunning /Users/hanweixing/Library/android-sdk-macosx/platform-tools/adb -s emulator-5554 reverse tcp:8081 tcp:8081\nStarting the app on emulator-5554 (/Users/hanweixing/Library/android-sdk-macosx/platform-tools/adb -s emulator-5554 shell am start -n com.ymq.min/.MainActivity)...\nStarting: Intent { cmp=com.ymq.min/.MainActivity }\nError type 3\nError: Activity class {com.ymq.min/com.ymq.min.MainActivity} does not exist.\n```\n解决方法：\n修改run-android.js，指定从applicationId来读取mainActivity\n （参考链接：https://github.com/facebook/react-native/issues/5546）\n\n注意：\n安卓中如果集成了react native界面，需要的配置还要有：\n1. \n```\n\u003Cactivity\nandroid:name=\"com.ymq.badminton.activity.MainActivity\"\n             android:label=\"@string/app_name\"\n-            android:screenOrientation=\"portrait\" />\n+            android:screenOrientation=\"portrait\" \n+            android:exported=\"true\" />\n```\n\n2. android／app／build.gradle\n```\napply plugin: 'com.android.application'\napply plugin: 'android-apt'\n+ apply from: \"../../node_modules/react-native/react.gradle\"\n+ def enableSeparateBuildPerCPUArchitecture = false\n+ def enableProguardInReleaseBuilds = false\nandroid {\n    signingConfigs {\n        config_release {\n\n \n         signingConfig signingConfigs.config_release\n         multiDexEnabled true\n-\n+\tndk {\n+            abiFilters \"armeabi-v7a\", \"x86\"\n+        }\n+\t\n+\tpackagingOptions {\n+            exclude \"lib/arm64-v8a/librealm-jni.so\"\n+        }\n     }\n+\t\n+    splits {\n+         abi {//多平台支持\n+             reset()\n+             enable enableSeparateBuildPerCPUArchitecture\n+             universalApk false  // If true, also generate a universal APK\n+             include \"armeabi-v7a\", \"x86\"\n+         }\n+     }   \n+    \n     dexOptions {\n         jumboMode true\n     }\n\n \n dependencies {\n \n-    compile \"com.facebook.react:react-native:0.42.0\" // From node_modules.\n+    compile \"com.facebook.react:react-native:+\" // From node_modules.\n \n-    compile fileTree(include: ['*.jar'], dir: 'libs')\n+    compile fileTree(dir: \"libs\", include: [\"*.jar\"])\n     //testCompile 'junit:junit:4.12'\n \n     // custom alert\n\n```\n\n3. android/app/gradle.properties\n```\norg.gradle.jvmargs=-Xmx2048m -XX\\:MaxPermSize\\=512m -XX\\:+HeapDumpOnOutOfMemoryError -Dfile.encoding\\=UTF-8\n   org.gradle.daemon=true\n   org.gradle.parallel=true\n+ android.useDeprecatedNdk=true\n   systemProp.http.proxyPort=8080\n   versCode=158\n   versName=1.2.7\n   No newline at end of file\n```\n\n4. android/app/src/main/AndroidManifest.xml\n```\n\u003Cuses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\" />\n      \u003Cuses-permission android:name=\"android.permission.READ_LOGS\" />\n+    \u003Cuses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\" />\n      \u003Cuses-permission android:name=\"android.permission.SYSTEM_OVERLAY_WINDOW\" />\n      \u003Cuses-permission android:name=\"android.permission.WAKE_LOCK\" />\n      \u003Cuses-permission android:name=\"android.permission.USE_CREDENTIALS\" />\n      \u003Cuses-permission android:name=\"android.permission.MANAGE_ACCOUNTS\" />\n```\n\n5. android/build.gradle\n```\nallprojects {\n    repositories {\n        mavenCentral()\n+\t\tmavenLocal()\n        jcenter()\n        maven {\n            url \"https://jitpack.io\"\n```\n\n6. android/app/build.gradle\n```\n}\n \n configurations.all {\n-    // OkHttp 3.5.0+ includes the websockets API, so we need this to prevent a conflict\n-    exclude module: 'okhttp-ws'\n+    resolutionStrategy.force 'com.squareup.okhttp3:okhttp:3.4.1'\n }\n```\n\n7. 其他的具体看工程配置。\n","在iOS和Android中如何集成react native，这里以我的工程做一个记录。这是一篇比较老的笔记，很早记录的，现在翻出来以供大家御览。","",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",12,{"id":24,"name":26,"parentId":21},"React Native",[],314,0,"react native,react native工程,react native集成,react native ios android,react native app"]