react-native 版本：0.59.8
react-native init aitingci英语单词学习App
英语App项目目录
|-- aitingci
| |-- src
| | +-- common
| | +-- component
| | |-- features (功能模块目录)
| | | |-- vocabulary
| | | | |-- redux (状态管理)
| | | | | +--action
| | | | | |--home.js
| | | | | |--vocaPlay.js
| | | | |-- HomePage.js
| | | | |-- dao (realm数据库操作)
| | | | | |--vocaDao
| | | | | |--vocaTaskDao
| | | +-- reading (阅读模块)
| | | +-- mine （我的模块）
| | +-- style (全局样式)
| | +-- image （图片）
| |--App.js
yarn add react-native-drawer
yarn add react-native-easy-grid
gesture-handler 需要link
yarn add react-navigation
yarn add react-native-gesture-handler
整合navigation 和redux
yarn add react-navigation-redux-helpers
yarn add react-native-vector-icons
//最新版本存在问题
yarn add react-native-progress@3.6.0yarn add react-native-check-box
yarn add react-native-calendars
yarn add react-native-popup-menu
yarn add react-native-modalbox@latest
yarn add prop-types
yarn add redux
yarn add react-redux
yarn add redux-devtools --dev
yarn add redux-saga
yarn add redux-actions
yarn add react-native-sound
手动link
yarn add rn-fetch-blob
react-native link rn-fetch-blob
yarn add react-native-storage
yarn add @react-native-community/async-storage
react-native link @react-native-community/async-storage
yarn add redux-persist
yarn add axios
yarn add realm
手动link
问题记录： 安装realm后，remotely debug会出现以下问题：
DOMException: Failed to execute 'send' on 'XMLHttpRequest'
V:\VSCode\English\JiZhiTingCi\node_modules\react-native\Libraries\Core\ExceptionsManager.js:74 Realm failed to connect to the embedded debug server inside the app
'Access to XMLHttpRequest at 'http://localhost:8081/create_session' from origin 'http://192.168.1.21:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.'
'Must first create RPC session with a valid host'
'Unhandled JS Exception: Must first create RPC session with a valid host'
解决方法：
adb forward --list 【检查你的设备是否在名单里】
adb forward tcp:8083 tcp:8083 【建立连接】
然后参考链接，修改realm/lib/browser/rpc.js
if (global.__debug__) {
let request = global.__debug__.require('sync-request');
let response = request('POST', url, {
body: JSON.stringify(data),
headers: {
"Content-Type": "text/plain;charset=UTF-8"
}
});
statusCode = response.statusCode;
responseText = response.body.toString('utf-8');
} else {
let body = JSON.stringify(data);
let request = new XMLHttpRequest();
// 增加以下代码
if (__DEV__) {
url = 'http://localhost:8083' + url.substring(url.lastIndexOf('/'));
}//增加上述代码
request.open('POST', url, false);
request.send(body);
statusCode = request.status;
responseText = request.responseText;
}问题：error: more than one device/emulator
解决：taskkill /f /im adb.exe
参考：https://blog.csdn.net/Yuequnchen/article/details/86625223
yarn add uuid
yarn add react-native-swiper
yarn add react-native-cardview
手动linkyarn add react-native-parallax-scroll-view
yarn add react-native-svg
手动link
yarn add react-native-linear-gradient
手动link
yarn add react-native-spinkit
手动link
yarn add react-native-webview
react-native link react-native-webviewyarn add react-native-collapsible
yarn add react-native-easy-toast
yarn add react-native-image-picker
react-native link react-native-image-pickeryarn add react-native-wheel-picker
//手动linkissue:
出现propTypes问题
采用其他pull后修复该问题的库
"Build failed" when i go genarate de apk file "./gradlew assembleRelease"
修改 build.gradle 文件
compileSdkVersion 28
buildToolsVersion "28.0.3" yarn add @react-native-community/blur
react-native link @react-native-community/blurissue:android suppot 迁移到androidx
【fixed】//修改Module.java
import androidx.renderscript.Allocation;
import androidx.renderscript.Element;
import androidx.renderscript.RenderScript;
import androidx.renderscript.ScriptIntrinsicBlur;yarn add react-native-zip-archive
yarn add react-native-background-timer
yarn add react-native-exit-app
react-native link react-native-exit-app
yarn add react-native-sortable-listview
yarn add react-native-view-shot
react-native link react-native-view-shot
yarn add @react-native-community/netinfo
react-native link @react-native-community/netinfo
//集成阿里百川的反馈模块
yarn add react-native-feedback
方式一：如果使用scrollToIndex()需要修改SectionList和VirtualizedSectionList的代码.
方式二：用scrollToLocation()替换scrollToIndex()
参考：基本配置 https://github.com/uPhyca/stetho-realm
参考： support realm5.10.0 uPhyca/stetho-realm#62
遇到问题：
找不到stetho_realm， 找不到Realm
打开devtools ，点开realm数据库就出现 connect close.
最终方案：
import com.facebook.stetho.Stetho;
import com.uphyca.stetho_realm.RealmInspectorModulesProvider;
import io.realm.Realm;
import io.realm.RealmConfiguration;
// #todo:生产环境下注释
//Realm初始化
Realm.init(this);
RealmConfiguration configuration = new RealmConfiguration.Builder()
.name(Realm.DEFAULT_REALM_NAME)
.schemaVersion(0)
.deleteRealmIfMigrationNeeded()
.build();
Realm realm = Realm.getDefaultInstance();
Realm.setDefaultConfiguration(configuration);
realm.close();
//调试时查看数据库
Stetho.initialize(
Stetho.newInitializerBuilder(this)
.enableDumpapp(Stetho.defaultDumperPluginsProvider(this))
.enableWebKitInspector(RealmInspectorModulesProvider
.builder(this)
.withDeleteIfMigrationNeeded(true)
.build())
.build());
//调试查看WebView
WebView.setWebContentsDebuggingEnabled(true);安装spy-debugger
npm install spy-debugger -g参考：https://github.com/wuchangming/spy-debugger
参考https://storybook.js.org/docs/guides/guide-react-native/
cd my-project-directory
npx -p @storybook/cli sb init --type react_native
npm run storybook
问题1 :
installation is not 100% automated.
To quickly run storybook, replace contents of your app entry with:
export default from './storybook';意思是说：把入口文件（constant.js）的内容用上面这句代码替换。或者用下面的代码替换：
import StorybookUI from './storybook';
export default StorybookUI;
问题2：
Unable to resolve module `emotion-theming` from `V:\VSCode\English\JiZhiTingCi\node_modules\@storybook\react-native\dist\preview\constant.js`: Module `emotion-theming` does not exist in the Haste module map
解决：
yarn add emotion-theming --dev
yarn add @emotion/core --dev
参考https://www.jianshu.com/p/d4e447430c3c
github demo: https://github.com/yinghuiwang/A0624-rn-unit-test
安装Enzyme
yarn add enzyme enzyme-adapter-react-16 --dev
yarn add react-native-mock --dev
不支持react16, 所以放弃react-native-mock
错误：_iterator3[(intermediate value)(intermediate value)(intermediate value)] is not a function
只能换成 for in的语法
详情：见文档docs/测试.md
Failed to install the following Android SDK packages as some licences have not been accepted
解决办法：https://www.rumoss.cn/archives/226/
运行sdkmanager 同意安装所有包的证书即可。
使用android studio Refactor -> Migrate to AndroidX
App启动崩溃 -> 改包名,使用脚本修改，脚本地址：https://gist.github.com/dlew/5db1b780896bbc6f542e7c00a11db6a0
1）can't find python
需要安装python2.7, 配置环境变量。
2）gyp Error!
参考： https://blog.csdn.net/dahuzix/article/details/90728059
3）node12 安装realm数据库出现编译问题
将node12降级到node10
点击App出现停顿原因：加载集成的第三方模块，此时启动页未开启。
解决： crazycodeboy/react-native-splash-screen#22
//去除AppTheme中下面的代码
<item name="android:windowIsTranslucent">true</item>
//AppTheme添加
<item name="android:windowBackground">@drawable/launch_screen</item>
<item name="colorPrimaryDark">@android:color/transparent</item>
"Build failed" when i go genarate de apk file "./gradlew assembleRelease"
需要修改的库：
react-native-wheel-picker
react-native-qq
修改 build.gradle 文件
compileSdkVersion 28
buildToolsVersion "28.0.3" 注意：千万不要修改targetSdkVersion
修改AndroidManifist.xml
//在Application中添加
android:usesCleartextTraffic="true"原因：fontWeight属性引起字体显示不完全
【参考】： https://blog.csdn.net/zwkkkk1/article/details/86642529
【参考】： https://blog.csdn.net/qq_36538734/article/details/90641888
在index.js入口文件添加代码：
const defaultFontFamily = {
...Platform.select({
android: { fontFamily: 'Roboto' }
})
};
const oldRender = Text.render;
Text.render = function(...args) {
const origin = oldRender.call(this, ...args);
return React.cloneElement(origin, {
style: [defaultFontFamily, origin.props.style]
});
};
【参考】： https://juejin.im/post/5d3ebfc15188255d660e1002
//设置text的行高yarn add jcore-react-native
yarn add janalytics-react-native
yarn add jpush-react-native
//手动linkissues:
issue1
程序包cn.jpush.reactnativejanalytics不存在
程序包cn.jpush.reactnativejpush不存在
...找不到符号
new JAnalyticsPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG),
new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)解决：包名地址不对，检查源文件。
改为：
import cn.jiguang.plugins.analytics.JAnalyticsPackage;
import cn.jiguang.plugins.push.JPushPackage;
然后报错：
无法将类 JPushPackage中的构造器 JPushPackage应用到给定类型
new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
需要: 没有参数
找到: boolean,boolean
原因: 实际参数列表和形式参数列表长度不同解决：删除两个参数：SHUTDOWN_TOAST, SHUTDOWN_LOG
issue2: 【fixed】
找不到：JAnalyticsInterface修改:
jcore-react-native janalytics-react-native jpush-react-native
里面的build.gradle文件， 把依赖中的implement改为api
yarn add @0x5e/react-native-alipayissue: 【fixed】
解决冲突utdid类冲突，用alipaySdk-15.6.8-20191021122455-noUtdid.arr替换android/libs下的arr文件
需要修改：@0x5e/react-native-alipay/android/build.gradle：
//compile(name: 'alipaySdk-15.5.9-20181123210601', ext: 'aar')
compile(name: 'alipaySdk-15.6.8-20191021122455-noUtdid', ext: 'aar')yarn add react-native-wechatissue: 【fixed】 迁移至androidx，需修改 WeChatModule ：
//import android.support.annotation.Nullable;
import androidx.annotation.Nullable;yarn add react-native-qq
react-native link react-native-qq
【必读参考】： https://www.jianshu.com/p/a493f6f92b34
issue: 【fixed】分享纯图片时模糊
//修改QQModule.java 把下面的：
if (data.hasKey(RCTQQShareImageUrl)){
bundle.putString(QQShare.SHARE_TO_QQ_IMAGE_URL,data.getString(RCTQQShareImageUrl));
}修改为：
//代码移动到函数最上方---start
String type = RCTQQShareTypeNews;
if (data.hasKey(RCTQQShareType)) {
type = data.getString(RCTQQShareType);
}
//代码移动到函数最上方---end
//修改--start
if (!type.equals(RCTQQShareTypeImage)){
if (data.hasKey(RCTQQShareImageUrl)){
bundle.putString(QQShare.SHARE_TO_QQ_IMAGE_URL,data.getString(RCTQQShareImageUrl));
}
}
//修改--endissue:【fixed】 分享的纯图片为空
解决：文件路径不正确，不能使用应用程序下的目录，最后使用
issue: 【fixed】App如果没有文件读写权限则无法唤起QQ分享
解决：使用react-native库的PermissionsAndroid获取权限
issue:【todo】QQ未安装判断
解决：在react-native-qq的index.js文件中添加
export function isQQInstalledAction() {
return QQAPI.isQQInstalled().then((res) => {
() => waitForResponse("QQAuthorizeResponse")
})
}yarn add react-native-code-push
react-native link react-native-code-push
#添加部署
code-push deployment add aitingci Production
code-push deployment add aitingci Staging
#查看部署
code-push deployment ls aitingci -k
#开发环境热更新
code-push release-react aitingci android --dev true --d Staging --des "第一次打包测试" --m true
#生产环境热更新
code-push release-react aitingci android --dev false --d Production --des "爱听词V1.0.5版：取消微信登录，修复已知问题。 【注意：本次更新将耗时30秒左右，App会在后台自动更新，更新完成后会自动重启App，请等更新完成后再操作.】" --m true
#删除部署
code-push deployment rm aitingci Production
code-push deployment rm aitingci Staging
#说明--m true 强制用户更新#查看签名
keytool -list -v -keystore aitingci.jks
//进入android目录后打包
./gradlew assembleStaging
./gradlew assembleRelease
更新App，进入App后操作，App会在后台更新，更新完成后导致App重启
//取消极光推送里面的权限
//jpush-react-native
//janalytics-react-native
ACCESS_COARSE_LOCATION //GPS定位
ACCESS_FINE_LOCATION //网络大致定位
WRITE_SETTINGS //修改系统设置
//把AndroidManifest.xml中带有LOCATION的权限都注释掉
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent