React Native笔记

[doin]

安装环境

• 都有了： http://reactnative.cn/docs/0.49/getting-started.html react-native init MyApp --version 0.44.3

测试环境

HELLO WORLD

学习参考

• https://github.com/crazycodeboy/RNStudyNotes/

[doin]

• 学习React Native必看的几个开源项目 http://www.cnblogs.com/qiangxia/p/5584622.html

[doin]

navigation + router处理

• 参考： https://reactnavigation.org/
• http://reactnative.cn/post/20

[doin]

tabbar使用

• http://blog.csdn.net/yuanguozhengjust/article/details/50553525 京东

[doin]

动态设置navigationOptions的title

• this.props.navigation.setParams({name:"可以的"})
• 参考：

[doin]

TOAST使用

• https://www.npmjs.com/package/react-native-root-toast
• react-native-easy-toast 一款简单易用的 Toast 组件，支持 Android&iOS

[doin]

React Native 项目常用第三方组件汇总

[doin]

fetch如何使用， 封装库

• http://www.10tiao.com/html/661/201607/2654472590/1.html

[doin]

警告： debug一直在警告， 看翻译就知道需要把浏览器进程放在前面

warning encountered 1 time. remote debugger is in a background tab which may cause apps to perform slowly. fix this by foregrounding the tab (or opening it in a separate window)

翻译： 远程调试器处于后台选项卡，可能会导致应用程序执行缓慢。 通过前面的选项卡（或在单独的窗口中打开它）来解决这个问题

[doin]

真机调试

• 在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来进行调试。

心得：在使用真机调试时，你需要确保你的手机和电脑处在同一个网段内，即它们实在同一个路由器下。

[doin]

怎么查看调试网络请求，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

[doin]

webpack打包react文件过大的问题

1. 生产环境禁用 source-map devtool: shouldUseSourceMap ? false : false
2. 合并公用文件 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/

[doin]

图片背景如何实现

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

return (
  <Image source={...}>
    <Text>Inside</Text>
  </Image>
);

[doin]

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

[doin]

打包IPA给测试人使用教程

1. 命令编译： react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ios/ios.jsbundle
2. 修改文件：

   //jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"ios" withExtension:@"jsbundle"];

   • http://www.jianshu.com/p/ada5243d5acc

[doin]

网络加载的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

[doin]

设置IOS的应用名称

• info.plist => Bundle name 修改

设置IOS的图标ICON

• http://www.jianshu.com/p/b49629529a95
• http://www.atool.org/ios_logo.php 图标生成
• 启动图注意：
  1. images.xcassests添加new ios launch Image写好
  2. LaunchScreen -> use as Launch Screen 勾去了
  3. DoctorRN -> targets -> appicons and launch images
  4. 一定要删除模拟器上的应用再跑一起才会更新

[doin]

安卓真机调试

报错 模拟器可以安装 真机无法安装

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

2. 报错： 安卓真机上启动后白屏

   • 参考： http://blog.csdn.net/itpinpai/article/details/50845625
   • 参考： http://blog.csdn.net/u010287009/article/details/51131349

3. 报错： 真机红屏（同网段不需要）

   • 参考： 参考： http://blog.csdn.net/u010287009/article/details/51131349

4. 摇一摇DEBUG窗不显示：

   • 权限没有开， 显示悬浮窗功能开启
   • 参考： https://jingyan.baidu.com/article/1974b28987e7b5f4b0f77465.html

5. 5.0和5.0以下真机调试的不同方式

   • 参考： http://blog.csdn.net/honjane/article/details/52913493

[doin]

使用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

[doin]

ScrollView使用RefreshControl完成下拉刷新

• 看DEMO

[doin]

安卓打包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

[doin]

使用react-native-root-toast报错

解决

• 参考： https://github.com/invertase/react-native-firebase/issues/386

  // 修改react-native-root-siblings/lib/AppRegistryInjection.js文件
  import EventEmitter from 'react-native/Libraries/vendor/emitter/EventEmitter';
  //import EventEmitter from 'react-native/Libraries/EventEmitter/EventEmitter';

[doin]

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

[doin]

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

[doin]

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

[doin]

What is the meaning of 'No bundle URL present' in react-native? https://github.com/facebook/react-native/issues/12754

[doin]

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 是我本机的用户名，替换成自己的用户名就可以了。

[doin]

found 'config.h'

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