ReactNative笔记 | Doin's blog

安装环境

都有了： http://reactnative.cn/docs/0.49/getting-started.html
react-native init MyApp –version 0.44.3
学习参考
https://github.com/crazycodeboy/RNStudyNotes/
学习React Native必看的几个开源项目 http://www.cnblogs.com/qiangxia/p/5584622.html
navigation + router处理

参考： https://reactnavigation.org/
http://reactnative.cn/post/20
tabbar使用

http://blog.csdn.net/yuanguozhengjust/article/details/50553525 京东
TOAST使用

https://www.npmjs.com/package/react-native-root-toast
react-native-easy-toast 一款简单易用的 Toast 组件，支持 Android&iOS
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/53ff78168acc
fetch如何使用，封装库

http://www.10tiao.com/html/661/201607/2654472590/1.html
真机调试

在iOS上
打开”RCTWebSocketExecutor.m “文件，将“localhost”改为你的电脑的ip，然后在Developer Menu下单击”Debug JS Remotely” 启动JS远程调试功能。
在Android上
方式一：
在Android5.0以上设备上，将手机通过usb连接到你的电脑，然后通过adb命令行工具运行如下命令来设置端口转发。
adb reverse tcp:8081 tcp:8081
方式二：
你也可以通过在“Developer Menu”下的“Dev Settings”中设置你的电脑ip来进行调试。
心得：在使用真机调试时，你需要确保你的手机和电脑处在同一个网段内，即它们实在同一个路由器下。
怎么查看调试网络请求，chorme面板里没有看到

参考： https://github.com/crazycodeboy/RNStudyNotes/blob/master/React%20Native%E8%B0%83%E8%AF%95%E6%8A%80%E5%B7%A7%E4%B8%8E%E5%BF%83%E5%BE%97/React%20Native%E8%B0%83%E8%AF%95%E6%8A%80%E5%B7%A7%E4%B8%8E%E5%BF%83%E5%BE%97.md
https://facebook.github.io/react-native/docs/network.html
React Native 网络请求封装：使用 Promise 封装 fetch 请求
https://juejin.im/entry/590fe17b1b69e6006854987b
webpack打包react文件过大的问题

生产环境禁用 source-map devtool: shouldUseSourceMap ? false : false
合并公用文件 vendor: [require.resolve(‘./polyfills’), “react”, “react-dom”, “react-router”]
参考
https://www.cnblogs.com/zhubei/p/6479454.html
http://react-china.org/t/create-react-app/12195/5
http://imshuai.com/create-react-app-multiple-entry-points/
图片背景如何实现

通过嵌套来实现背景图片
开发者们常面对的一种需求就是类似web中的背景图（background-image）。要实现这一用例，只需简单地创建一个组件，然后把需要背景图的子组件嵌入其中即可。
return (

Inside

);
react-native 填坑之Image “unexpected character 乱码”
https://stackoverflow.com/questions/36252381/error-on-load-image-on-react-native-unexpected-character
http://blog.csdn.net/u014038534/article/details/53943862
打包IPA给测试人使用教程
命令编译： react-native bundle –entry-file index.ios.js –platform ios –dev false –bundle-output ios/ios.jsbundle
修改文件：
//jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@”index.ios” fallbackResource:nil];
```
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"ios" withExtension:@"jsbundle"];
```
http://www.jianshu.com/p/ada5243d5acc
网络加载的Loading
http://blog.csdn.net/sinat_17775997/article/details/60954255
https://www.npmjs.com/package/react-native-loading-spinner-overlay
https://github.com/joinspontaneous/react-native-loading-spinner-overlay
设置IOS的应用名称

info.plist => Bundle name 修改
设置IOS的图标ICON
http://www.jianshu.com/p/b49629529a95
http://www.atool.org/ios_logo.php 图标生成
启动图注意：
images.xcassests添加new ios launch Image写好
LaunchScreen -> use as Launch Screen 勾去了
DoctorRN -> targets -> appicons and launch images
一定要删除模拟器上的应用再跑一起才会更新
安卓真机调试
报错模拟器可以安装真机无法安装
Installing APK ‘app-debug.apk’ on ‘m2 note - 5.1’ for app:debug
09:03:40 E/341473558: Error while uploading app-debug.apk : Unknown failure ([CDS]close[0])
Unable to install /Users/doin/Desktop/coding/DoctorRN/android/app/build/outputs/apk/app-debug.apk
com.android.ddmlib.InstallException: Failed to install all
```
at com.android.ddmlib.SplitApkInstaller.install(SplitApkInstaller.java:89)
at com.android.ddmlib.Device.installPackages(Device.java:904)
at com.android.builder.testing.ConnectedDevice.installPackages(ConnectedDevice.java:137)
at com.android.build.gradle.internal.tasks.InstallVariantTask.install(InstallVariantTask.java:134)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at org.gradle.internal.reflect.JavaMethod.invoke(JavaMethod.java:75)
```
解决
安装错误: Gradle 的编译版本过高, 不兼容部分5.0+手机, 需要降低版本为 1.3.
Installing APK ‘app-debug.apk’ on ‘HUAWEI GRA-TL00 - 5.0.1’ for app:debug
Error while uploading app-debug.apk : Unknown failure ([CDS]close[0])
使用AndroidStudio安装的时候，IDE提供了app运行时需要的权限，所以直接使用Debug就可以安装。而使用react-native run-android有这样的问题是因为没有获得权限，所以没法往真机上装应用。
有两种解决办法，一是降低gradle的build版本，改为1.2.3；另一种是升级你的React－Native至最新版本。
打开 React Native 的项目, 修改最外层工程的 build.gradle 配置, 降低 gradle 的 build 为1.2.3版本.
buildscript {
```
repositories {
    jcenter()
    mavenLocal()
}
dependencies {
    classpath 'com.android.tools.build:gradle:1.2.3' // 修改1.2.3
    classpath 'de.undercouch:gradle-download-task:2.0.0'
```
```
    // NOTE: Do not place your application dependencies here; they belong
    // in the individual module build.gradle files
}
```
}
这个时候还是会报错，需要重新设置 Gradle 的 Wrapper , 修改为2.2版本.
Gradle version 2.2 is required. Current version is 2.11
修改Gradle的Wrapper版本，需要修改android／griddle／wrapper／grade-wrapper.properties文件:
distributionUrl=https\://services.gradle.org/distributions/gradle-2.2-all.zip
参考： http://blog.csdn.net/woxueliuyun/article/details/54562126
报错：安卓真机上启动后白屏
参考： http://blog.csdn.net/itpinpai/article/details/50845625
参考： http://blog.csdn.net/u010287009/article/details/51131349
报错：真机红屏（同网段不需要）
参考：参考： http://blog.csdn.net/u010287009/article/details/51131349
摇一摇DEBUG窗不显示：
权限没有开，显示悬浮窗功能开启
参考： https://jingyan.baidu.com/article/1974b28987e7b5f4b0f77465.html
5.0和5.0以下真机调试的不同方式
参考： http://blog.csdn.net/honjane/article/details/52913493

使用react navigation关于goBack返回指定页面的问题

参考： http://blog.csdn.net/u014041033/article/details/77880400
参考： http://www.jianshu.com/p/2f575cc35780
http://blog.csdn.net/zramals/article/details/73293499

安卓打包bundle.js文件
react-native bundle –entry-file index.android.js –bundle-output ./android/app/src/main/assets/index.android.jsbundle –platform android –assets-dest ./android/app/src/main/res/ –dev false
安卓生成key，配置key
// 生成key，把文件拉到APP文件夹DoctorRN-release-key.keystore
$ keytool -genkey -v -keystore DoctorRN-release-key.keystore -alias DoctorRN-key-alias -keyalg RSA -keysize 2048 -validity 10000
// 配置build.gradle
signingConfigs {
```
    release {
        storeFile file("./DoctorRN-release-key.keystore")
        storePassword "starfish"
        keyAlias "DoctorRN-key-alias"
        keyPassword "starfish"
    }
}
```
打包安卓的离线包在output文件里的APK
cd android && ./gradlew assembleRelease
React-native-router-flux
http://blog.csdn.net/fsf_snail/article/details/71080827
webview怎么动态的改变Scene上面的title/状态栏上面的button？
onNavigationStateChange = (navState) => {
```
  console.log("navState", navState);
  Actions.refresh({title:navState.title});
  this.setState({
    backButtonEnabled: navState.canGoBack,
    forwardButtonEnabled: navState.canGoForward,
    url: navState.url,
    status: navState.title,
    loading: navState.loading,
    scalesPageToFit: true
  });
};
```
参考： https://www.cnblogs.com/yz1311/p/6086234.html
tabs： http://www.jianshu.com/p/65ec0a44286c
https://github.com/aksonov/react-native-router-flux/tree/master/Example
react native 数字键盘没有确认键

React-Native:（多行文本）ios端将键盘回车改为确定键
官方组件 https://reactnative.cn/docs/0.44/keyboardavoidingview.html#content
键盘覆盖文字，上移 http://blog.csdn.net/codetomylaw/article/details/53284460
React Native 应用在键盘弹出时优雅地响应http://blog.csdn.net/sinat_17775997/article/details/72953940
react-native-xcode.sh: No such file or directory

I was able to solve this error by:
Opening the project in XCode
Navigate to Build Phases > Bundle React Native code and images
Change export NODE_BINARY=node
../node_modules/react-native/packager/react-native-xcode.sh to export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh
Notice how packager is now scripts, which is where that file actually lives in latest version of RN
https://stackoverflow.com/questions/33650380/react-native-error-react-native-xcode-sh-line-45-react-native-command-not-f
What is the meaning of ‘No bundle URL present’ in react-native?

facebook/react-native#12754 https://github.com/facebook/react-native/issues/12754
https://blog.csdn.net/shalyf/article/details/71629617

apple mach-o linker error 报错解决
https://blog.csdn.net/mushaofeng1990/article/details/53159147
只要在电脑上找到这个文件夹，删除下面所有的缓存文件，然后clean一下项目，再编译运行，就没有问题了。

上图中的 /Users/apple/Library/Developer/Xcode/DerivedData 中的apple 是我本机的用户名，替换成自己的用户名就可以了。
found ‘config.h’

https://www.jianshu.com/p/cf0ec5469522