本文均为RN开发过程中遇到的问题、坑点的分析及解决方案，各问题点之间无关联，希望能帮助读者少走弯路，持续更新中... （2019年3月29日更新）

原文链接：http://www.kovli.com/2018/06/25/rn-anything/

作者:Kovli

- 如何在原生端（iOS和android两个平台）使用ReactNative里的本地图片（路径类似require('./xxximage.png')）。

在ReactNative开发过程中，有时需要在原生端显示RN里的图片，这样的好处是可以通过热更新来更新APP里的图片，而不需要发布原生版本，而ReactNative里图片路径是相对路径，类似'./xxximage.png'的写法，原生端是无法解析这类路径，那么如果将RN的图片传递给原生端呢？

解决方案：

1、图片如果用网络图，那只需要将url字符串地址传递给原生即可，这种做法需要时间和网络环境加载图片，不属于本地图片，不是本方案所追求的最佳方式。

2、懒人做法是把RN的本地图片生成base64字符串然后传递给原生再解析，这种做法如果图片太大，字符串会相当长，同样不认为是最佳方案。

其实RN提供了相关的解决方法，如下：

RN端

  1. const myImage = require('./my-image.png');
  2. const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
  3. const resolvedImage = resolveAssetSource(myImage);
  4. NativeModules.NativeBridge.showRNImage(resolvedImage);

iOS端

  1. #import <React/RCTConvert.h>
  3. RCT_EXPORT_METHOD(showRNImage:(id)rnImageData){
  4.     dispatch_async(dispatch_get_main_queue(), ^{
  5.     UIImage *rnImage = [RCTConvert UIImage:rnImageData];
  6.     ...
  7.     });
  8. }

安卓端

第一步，从桥接文件获取到uri地址


  2. @ReactMethod
  3. public static void showRNImage(Activity activity, ReadableMap params){
  4.      String rnImageUri;
  5.      try {
  6.         //图片地址
  7.         rnImageUri = params.getString("uri");
  8.         Log.i("Jumping", "uri : " + uri);
  10.         ...
  12.         } catch (Exception e) {
  13.             return;
  14.         }
  15.  }

第二步，创建JsDevImageLoader.java

  1. package com.XXX;
  3. import android.content.res.Resources;
  4. import android.graphics.Bitmap;
  5. import android.graphics.BitmapFactory;
  6. import android.graphics.drawable.BitmapDrawable;
  7. import android.graphics.drawable.Drawable;
  8. import android.os.StrictMode;
  9. import android.support.annotation.NonNull;
  10. import android.util.Log;
  12. import com.XXX.NavigationApplication;
  14. import java.io.IOException;
  15. import java.net.URL;
  17. public class JsDevImageLoader {
  18.    private static final String TAG = "JsDevImageLoader";
  19.    public static Drawable loadIcon(String iconDevUri) {
  20.        try {
  21.            StrictMode.ThreadPolicy threadPolicy = StrictMode.getThreadPolicy();
  22.            StrictMode.setThreadPolicy(new StrictMode.ThreadPolicy.Builder().permitNetwork().build());
  24.            Drawable drawable = tryLoadIcon(iconDevUri);
  26.            StrictMode.setThreadPolicy(threadPolicy);
  27.            return drawable;
  28.        } catch (Exception e) {
  29.            Log.e(TAG, "Unable to load icon: " + iconDevUri);
  30.            return new BitmapDrawable();
  31.        }
  32.    }
  34.    @NonNull
  35.    private static Drawable tryLoadIcon(String iconDevUri) throws IOException {
  36.        URL url = new URL(iconDevUri);
  37.        Bitmap bitmap = BitmapFactory.decodeStream(url.openStream());
  38.        return new BitmapDrawable(NavigationApplication.instance.getResources(), bitmap);
  39.    }
  40. }

第三步，导入ResourceDrawableIdHelper.java


  2. package com.xg.navigation.react;// Copyright 2004-present Facebook. All Rights Reserved.
  4. import android.content.Context;
  5. import android.graphics.drawable.Drawable;
  6. import android.net.Uri;
  8. import com.facebook.common.util.UriUtil;
  10. import java.util.HashMap;
  11. import java.util.Map;
  13. import javax.annotation.Nullable;
  15. /**
  16.  * Direct copy paste from react-native, because they made that class package scope. -_-"
  17.  * Can be deleted in react-native ^0.29
  18.  */
  19. public class ResourceDrawableIdHelper {
  20.     public static final ResourceDrawableIdHelper instance = new ResourceDrawableIdHelper();
  22.     private Map<String, Integer> mResourceDrawableIdMap;
  24.     public ResourceDrawableIdHelper() {
  25.         mResourceDrawableIdMap = new HashMap<>();
  26.     }
  28.     public int getResourceDrawableId(Context context, @Nullable String name) {
  29.         if (name == null || name.isEmpty()) {
  30.             return 0;
  31.         }
  32.         name = name.toLowerCase().replace("-", "_");
  33.         if (mResourceDrawableIdMap.containsKey(name)) {
  34.             return mResourceDrawableIdMap.get(name);
  35.         }
  36.         int id = context.getResources().getIdentifier(
  37.                 name,
  38.                 "drawable",
  39.                 context.getPackageName());
  40.         mResourceDrawableIdMap.put(name, id);
  41.         return id;
  42.     }
  44.     @Nullable
  45.     public Drawable getResourceDrawable(Context context, @Nullable String name) {
  46.         int resId = getResourceDrawableId(context, name);
  47.         return resId > 0 ? context.getResources().getDrawable(resId) : null;
  48.     }
  50.     public Uri getResourceDrawableUri(Context context, @Nullable String name) {
  51.         int resId = getResourceDrawableId(context, name);
  52.         return resId > 0 ? new Uri.Builder()
  53.                 .scheme(UriUtil.LOCAL_RESOURCE_SCHEME)
  54.                 .path(String.valueOf(resId))
  55.                 .build() : Uri.EMPTY;
  56.     }
  57. }

第四步，创建BitmapUtil.java


  2. package com.XXX;
  4. import android.app.Activity;
  5. import android.graphics.Bitmap;
  6. import android.graphics.BitmapFactory;
  7. import android.graphics.drawable.BitmapDrawable;
  8. import android.graphics.drawable.Drawable;
  9. import android.net.Uri;
  10. import android.provider.MediaStore;
  11. import android.text.TextUtils;
  13. import com.XXX.NavigationApplication;
  14. import com.XXX.JsDevImageLoader;
  15. import com.XXX.ResourceDrawableIdHelper;
  17. import java.io.IOException;
  19. public class BitmapUtil {
  21.     private static final String FILE_SCHEME = "file";
  23.     public static Drawable loadImage(String iconSource) {
  25.         if (TextUtils.isEmpty(iconSource)) {
  26.             return null;
  27.         }
  29.         if (NavigationApplication.instance.isDebug()) {
  30.             return JsDevImageLoader.loadIcon(iconSource);
  31.         } else {
  32.             Uri uri = Uri.parse(iconSource);
  33.             if (isLocalFile(uri)) {
  34.                 return loadFile(uri);
  35.             } else {
  36.                 return loadResource(iconSource);
  37.             }
  38.         }
  39.     }
  41.     private static boolean isLocalFile(Uri uri) {
  42.         return FILE_SCHEME.equals(uri.getScheme());
  43.     }
  45.     private static Drawable loadFile(Uri uri) {
  46.         Bitmap bitmap = BitmapFactory.decodeFile(uri.getPath());
  47.         return new BitmapDrawable(NavigationApplication.instance.getResources(), bitmap);
  48.     }
  50.     private static Drawable loadResource(String iconSource) {
  51.         return ResourceDrawableIdHelper.instance.getResourceDrawable(NavigationApplication.instance, iconSource);
  52.     }
  54.     public static Bitmap getBitmap(Activity activity, String uri) {
  56.         if (activity == null || uri == null || TextUtils.isEmpty(uri)) {
  57.             return null;
  58.         }
  60.         Uri mImageCaptureUri;
  61.         try {
  62.             mImageCaptureUri = Uri.parse(uri);
  63.         } catch (Exception e) {
  64.             e.printStackTrace();
  65.             return null;
  66.         }
  68.         if (mImageCaptureUri == null) {
  69.             return null;
  70.         }
  72.         Bitmap bitmap = null;
  73.         try {
  74.             bitmap = MediaStore.Images.Media.getBitmap(activity.getContentResolver(), mImageCaptureUri);
  75.         } catch (IOException e) {
  76.             e.printStackTrace();
  77.             return null;
  78.         }
  80.         return bitmap;
  81.     }
  82. }

第五步，使用第一步里的rnImageUri地址

  1. ...
  2. BitmapUtil.loadImage(rnImageUri)
  3. ...

第六步，显示图片


  2. import android.widget.RelativeLayout;
  3. import android.support.v7.widget.AppCompatImageView;
  4. import android.graphics.drawable.Drawable;
  6. ...
  7. final RelativeLayout item = (RelativeLayout) mBottomBar.getChildAt(i);
  8. final AppCompatImageView itemIcon = (AppCompatImageView) item.getChildAt(0);
  9. itemIcon.setImageDrawable(BitmapUtil.loadImage(rnImageUri));
  11. ...

- 升级旧RN版本到目前最新的0.57.8如果采用手动升级需要注意如下。

I upgraded from react-naitve 0.55.4 to react-native 0.57.0 and I get this error

bundling failed: Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the 'decorators-legacy' plugin instead of 'decorators'.

解决方案：参考如下例子

First install the new proposal decorators with npm install @babel/plugin-proposal-decorators --save-dev or yarn add @babel/plugin-proposal-decorators --dev

Then, inside of your .babelrc file, change this:

  1. {
  2.   "presets": ["react-native"],
  3.   "plugins": ["transform-decorators-legacy"]
  4. }
  5. To this:
  7. {
  8.   "presets": [
  9.     "module:metro-react-native-babel-preset",
  10.     "@babel/preset-flow"
  11.   ],
  12.   "plugins": [
  13.     ["@babel/plugin-proposal-decorators", { "legacy" : true }]
  14.   ]
  15. }

EDIT:

After you've updated your .babelrc file, make sure to add preset-flow as well with the command yarn add @babel/preset-flow --dev or npm install @babel/preset-flow --save-dev

- ReactNative输入框TextInput点击弹起键盘，如果键盘遮挡了重要位置，如何让界面自动跟随键盘调整？

使用这个组件KeyboardAvoidingView

本组件用于解决一个常见的尴尬问题：手机上弹出的键盘常常会挡住当前的视图。本组件可以自动根据键盘的位置，调整自身的position或底部的padding，以避免被遮挡。

解决方案：参考如下例子

  1.       <ScrollView style={styles.container}>
  2.         <KeyboardAvoidingView behavior="position" keyboardVerticalOffset={64}>
  3.           ...
  4.           <TextInput />
  5.           ...
  6.         </KeyboardAvoidingView>
  7.       </ScrollView>

- ReactNative输入框TextInput点击弹起键盘，然后点击其他子组件，例如点击提交按钮，会先把键盘收起，再次点击提交按钮才响应提交按钮，得点击两次，如何做到点击提交按钮的同时收起键盘并响应按钮？

这个问题关键在ScrollView的keyboardShouldPersistTaps属性

，首先TextInput的特殊性（有键盘弹起）决定了其最好包裹在ScrollView里，其次如果当前界面有软键盘，那么点击scrollview后是否收起键盘，取决于keyboardShouldPersistTaps属性的设置。（译注：很多人反应TextInput无法自动失去焦点/需要点击多次切换到其他组件等等问题，其关键都是需要将TextInput放到ScrollView中再设置本属性）

  • 'never'（默认值），点击TextInput以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。
  • 'always'，键盘不会自动收起，ScrollView也不会捕捉点击事件，但子组件可以捕获。
  • 'handled'，当点击事件被子组件捕获时，键盘不会自动收起。这样切换TextInput时键盘可以保持状态。多数带有TextInput的情况下你应该选择此项。
  • false，已过期，请使用'never'代替。
  • true，已过期，请使用'always'代替。

解决方案：看如下例子

  1.       <ScrollView style={styles.container}
  2.                   keyboardShouldPersistTaps="handled">
  3.         <TextInput />
  4.        ...
  5.       </ScrollView>
  7.     //按钮点击事件注意收起键盘
  8.       _checkAndSubmit = () => {
  9.         Keyboard.dismiss();
  10.       };

- ReactNative本地图片如何获取其base64编码？（一般指采用<Image source={require('./icon.png'.../>这类相对路径地址的图片资源如何获取到绝对路径）

关键是要获取到本地图片的uri，用到了Image.resolveAssetSource方法，ImageEditor.cropImage方法和ImageStore.getBase64ForTag方法，具体可以查询官方文档

解决方案：看如下代码

  1.       import item from '../../images/avator_upload_icon.png';
  3.       const info = Image.resolveAssetSource(item);
  5.       ImageEditor.cropImage(info.uri, {
  6.         size: {
  7.           width: 126,
  8.           height: 126
  9.         },
  10.         resizeMode: 'cover'
  11.       }, uri => {
  12.         ImageStore.getBase64ForTag(uri, base64ImageData => {
  13.           // 获取图片字节码的base64字符串
  14.           this.setState({
  15.             avatarBase64: base64ImageData
  16.           });
  17.         }, err => {
  18.           console.warn("ImageStoreError" + JSON.stringify(err));
  19.         });
  20.       }, err => {
  21.         console.warn("ImageEditorError" + JSON.stringify(err));
  23.       });

- ReactNative如何读取iOS沙盒里的图片？

解决方案：看如下代码

  1.       let RNFS = require('react-native-fs');
  2.         <Image
  3.           style={{width:100, height:100}}
  4.           source={{uri: 'file://' + RNFS.DocumentDirectoryPath + '/myAwesomeSubDir/my.png', scale:1}}

- ReactNative如何做到图片宽度不变，宽高保持比例，高度自动调整。

RN图片均需要指定宽高才会显示，如果图片数据的宽高不定，但又希望宽度保持不变、不同图片的高度根据比例动态变化，就需要用到下面这个库，业务场景常用于文章、商品详情的多图展示。

解决方案：使用react-native-scalable-image

- navigor 无法使用的解决办法

从0.44版本开始，Navigator被从react native的核心组件库中剥离到了一个名为react-native-deprecated-custom-components的单独模块中。如果你需要继续使用Navigator，则需要先npm i facebookarchive/react-native-custom-components安装，然后从这个模块中import，即import { Navigator } from 'react-native-deprecated-custom-components'

如果报错如下参考下面的解决方案

React-Native – undefined is not an object (“evaluating _react3.default.PropTypes.shape”)

解决方案：

如果已经安装了，先卸载npm uninstall --save react-native-deprecated-custom-components

用下面的命令安装

npm install --save https://github.com/facebookarchive/react-native-custom-components.git

在我们使用Navigator的js文件中加入下面这个导入包就可以了。

import { Navigator } from'react-native-deprecated-custom-components';（注意最后有一个分号）

就可以正常使用Navigator组件了。

- ReactNative开发的APP启动闪白屏问题

由于处理JS需要时间，APP启动会出现一闪而过白屏，可以通过启动页延迟加载方法来避免这类白屏，可以用下面的库

解决方案：react-native-splash-screen

- ReactNative如何做到无感热更新

无论是整包热更新还是差量热更新，均需要最终替换JSBundle等文件来完成更新过程，实现原理是js来控制启动页的消失时间,等原生把bundle包下载（或合并成新bundle包）解压到目录以后,通知js消失启动页,由于热更新时间一般很短,建议使用差量热更新，一秒左右,所以用户等启动页消失后看到的就是最新的版本。

解决方案（以整包更新为例）：

  1. 原生端完成更新及刷新操作，注意里面的 [_bridge reload]
  1. //前往更新js包
  2. RCT_EXPORT_METHOD(gotoUpdateJS:(NSString *)jsUrl andResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject){
  3.   if (!jsUrl) {
  4.     return;
  5.   }
  7.   //jsbundle更新采用静默更新
  8.   //更新
  9.   NSLog(@"jsbundleUrl is : %@",  jsUrl);
  10.   [[LJFileHelper shared] downloadFileWithURLString:jsUrl finish:^(NSInteger status, id data) {
  11.     if(status == 1){
  12.       NSLog(@"下载完成");
  13.       NSError *error;
  14.       NSString *filePath = (NSString *)data;
  15.       NSString *desPath = [NSString stringWithFormat:@"%@",NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)[0]];
  16.       [SSZipArchive unzipFileAtPath:filePath toDestination:desPath overwrite:YES password:nil error:&error];
  17.       if(!error){
  18.         [_bridge reload];
  20.         resolve([NSNumber numberWithBool:true]);
  21.         NSLog(@"解压成功");
  23.       }else{
  24.         resolve([NSNumber numberWithBool:false]);
  25.         NSLog(@"解压失败");
  26.       }
  27.     }
  28.   }];
  30.   reject = nil;
  31. }
  1. JS端
  1. // 原生端通过回调结果通知JS热更新情况，JS端
  2. UpdateModule.gotoUpdateJS(jsUrl).then(resp => {
  4.     if ( resp ) {
  5.        // 成功更新通知隐藏启动页
  6.        DeviceEventEmitter.emit("hide_loading_page",'hide');
  7.     } else {
  8.        // 出问题也要隐藏启动页，用户继续使用旧版本
  9.        DeviceEventEmitter.emit("hide_loading_page",'hide');
  10.        // 其他处理
  11.     }
  13. });
  1. 启动页消失，用户看到的是新版APP
  1.     async componentWillMount() {
  3.         this.subscription = DeviceEventEmitter.addListener("hide_loading_page", this.hideLoadingPage);
  4.         appUpdateModule.updateJs();
  6.     }
  8.     hideLoadingPage = ()=> {
  9.         SplashScreen.hide();
  10.     };

注意做好容错，例如弱网无网环境下的处理，热更新失败下次保证再次热更新的处理，热更新时间把控，超过时间下次再reload，是否将热更新reload权利交给用户等等都可以扩展。

- ReactNative如何取消部分警告

debug模式下调试经常会有黄色的警告，有些警告可能是短时间不需要处理，通过下面的解决方法能忽略部分警告提示

解决方案：使用console.ignoredYellowBox

  1. import { AppRegistry } from 'react-native';
  2. import './app/Common/SetTheme'
  3. import './app/Common/Global'
  5. import App from './App';
  7. console.ignoredYellowBox = ['Warning: BackAndroid is deprecated.  Please use BackHandler instead.',
  8.     'source.uri should not be an empty string','Remote debugger is in a background tab which',
  9.     'Setting a timer',
  10.     'Encountered two children with the same key,',
  11.     'Attempt to read an array index',
  12. ];
  14. AppRegistry.registerComponent('ReactNativeTemplate', () => App);

- ReactNative开发遇到android网络图片显示不出来的问题

开发过程中有时会遇到iOS图片正常显示，但是安卓却只能显示部分网络图片，造成这个的原因有多种，参考下面的解决方案。

解决方案：

  1. 安卓增加resizeMethod属性并设置为resize
  1. <Image style={styles.imageStyle} source={{uri: itemInfo.imageUrl || ''}} resizeMethod={'resize'}/>

resizeMethod官方解释

  1. resizeMethod  enum('auto', 'resize', 'scale') 
  3. 当图片实际尺寸和容器样式尺寸不一致时，决定以怎样的策略来调整图片的尺寸。默认值为auto。
  5. auto：使用启发式算法来在resize和scale中自动决定。
  7. resize： 在图片解码之前，使用软件算法对其在内存中的数据进行修改。当图片尺寸比容器尺寸大得多时，应该优先使用此选项。
  9. scale：对图片进行缩放。和resize相比， scale速度更快（一般有硬件加速），而且图片质量更优。在图片尺寸比容器尺寸小或者只是稍大一点时，应该优先使用此选项。
  11. 关于resize和scale的详细说明请参考http://frescolib.org/docs/resizing-rotating.html.
  1. 如果是FlatList或ScrollView等包裹图片，尝试设置

removeClippedSubviews={true}//ios set false

  1. 如果还是有问题，尝试配合react-native-image-progress

    还可以谨慎尝试使用react-native-fast-image

- ReactNative判断及监控网络情况方法总结

提前获取用户的网络情况很有必要，RN主要靠NetInfo来获取网络状态，不过随着RN版本的更新也有一些变化。

解决方案:

  1. 较新的RN版本（大概是0.50及以上版本）
  1.     this.queryConfig();
  3.     queryConfig = ()=> {
  4.         this.listener = NetInfo.addEventListener('connectionChange', this._netChange);
  5.     };
  7.         // 网络发生变化时
  8.     _netChange = async(info)=> {
  9.         const {
  10.             type,
  11.             //effectiveType
  12.         } = info;
  13.         const netCanUse = !(type === 'none' || type === 'unknown' || type === 'UNKNOWN' || type === 'NONE');
  14.         if (!netCanUse) {
  15.             this.setState({
  16.                 isNetError : true
  17.             });
  18.             this.alertNetError(); //或者其他通知形式
  20.         } else {
  21.             try {
  22.                 // 注意这里的await语句，其所在的函数必须有async关键字声明
  23.                 let response = await fetch(CONFIG_URL);
  24.                 let responseJson = await response.json();
  25.                 const configData = responseJson.result;
  26.                 if (response && configData) {
  27.                     this.setState({
  28.                         is_show_tip: configData.is_show_tip,
  29.                         app_bg: CONFIG_HOST + configData.app_bg,
  30.                         jumpUrl: configData.url,
  31.                         isGetConfigData: true
  32.                     }, () => {
  33.                         SplashScreen.hide();
  34.                     })
  35.                 } else {
  36.                     // 错误码也去壳
  37.                     if ( responseJson.code === 400 ) {
  38.                         this.setState({
  39.                             isGetConfigData: true
  40.                         }, () => {
  41.                             SplashScreen.hide();
  42.                         })
  43.                     } else {
  44.                         this.setState({
  45.                             isGetConfigData: false
  46.                         }, () => {
  47.                             SplashScreen.hide();
  48.                         })
  49.                     }
  50.                 }
  52.             } catch (error) {
  53.                 console.log('queryConfig error:' + error);
  54.                 this.setState({
  55.                     isGetConfigData: true
  56.                 }, () => {
  57.                     SplashScreen.hide();
  58.                 })
  59.             }
  61.         }
  62.     };
  64.         alertNetError = () => {
  65.         setTimeout(()=> {
  66.             SplashScreen.hide();
  68.         }, 1000);
  70.         if ( ! this.state.is_show_tip &&  this.state.isGetConfigData ) {
  71.             return
  72.         } else {
  73.             Alert.alert(
  74.                 'NetworkDisconnected',
  75.                 '',
  76.                 [
  77.                     {text: 'NetworkDisconnected_OK', onPress: () => {
  78.                         this.checkNetState();
  79.                     }},
  80.                 ],
  81.                 {cancelable: false}
  82.             );        }
  84.     };
  86.         checkNetState = () => {
  87.         NetInfo.isConnected.fetch().done((isConnected) => {
  88.             if ( !isConnected ) {
  89.                 this.alertNetError();
  90.             } else {
  91.                 this.queryConfig();
  92.             }
  93.         });
  95.     };
  1. 老版本
  1.     async componentWillMount() {
  2.         this.queryConfig();
  3.     }
  5.     checkNetState = () => {
  6.         NetInfo.isConnected.fetch().done((isConnected) => {
  7.             console.log('111Then, is ' + (isConnected ? 'online' : 'offline'));
  8.             if (!isConnected) {
  9.                 this.alertNetError();
  10.             } else {
  11.                 this.queryConfig();
  12.             }
  13.         });
  15.     };
  17.     alertNetError = () => {
  18.         setTimeout(()=> {
  19.             SplashScreen.hide();
  21.         }, 1000);
  22.         console.log('111111');
  24.         if (!this.state.is_show_tip && this.state.isGetConfigData) {
  25.             console.log('222222');
  27.             return
  28.         } else {
  29.             console.log('33333');
  31.             Alert.alert(
  32.                 'NetworkDisconnected',
  33.                 '',
  34.                 [
  35.                     {
  36.                         text: 'NetworkDisconnected_OK', onPress: () => {
  37.                         this.checkNetState();
  38.                     }
  39.                     },
  40.                 ],
  41.                 {cancelable: false}
  42.             );
  43.         }
  45.     };
  47.     queryConfig = ()=> {
  49.         NetInfo.isConnected.addEventListener(
  50.             'connectionChange',
  51.             this._netChange
  52.         );
  54.     };
  56.     // 网络发生变化时
  57.     _netChange = async(isConnected)=> {
  58.         console.log('Then, is ' + (isConnected ? 'online' : 'offline'));
  60.         if (!isConnected) {
  61.             console.log('666');
  63.             this.setState({
  64.                 isNetError: true
  65.             });
  66.             this.alertNetError();
  68.         } else {
  69.             try {
  70.                 // 注意这里的await语句，其所在的函数必须有async关键字声明
  71.                 let response = await fetch(CONFIG_URL);
  72.                 let responseJson = await response.json();
  73.                 const configData = responseJson.result;
  74.                 if (response && configData) {
  75.                     this.setState({
  76.                         is_show_tip: configData.is_show_tip,
  77.                         app_bg: CONFIG_HOST + configData.app_bg,
  78.                         jumpUrl: configData.url,
  79.                         isGetConfigData: true
  80.                     }, () => {
  81.                         SplashScreen.hide();
  82.                         this.componentNext();
  83.                     })
  84.                 } else {
  85.                     this.setState({
  86.                         isGetConfigData: false
  87.                     }, () => {
  88.                         SplashScreen.hide();
  89.                         this.componentNext();
  90.                     })
  91.                 }
  93.             } catch (error) {
  94.                 console.log('queryConfig error:' + error);
  95.                 this.setState({
  96.                     isGetConfigData: true
  97.                 }, () => {
  98.                     SplashScreen.hide();
  99.                     this.componentNext();
  100.                 })
  101.             }
  103.         }
  104.     };

- ReactNative版本升级后报错有废弃代码的快速解决方法

使用第三方库或者老版本升级时会遇到报错提示某些方法被废弃，这时候寻找和替换要花不少时间，而且还容易漏掉。

解决方案：

根据报错信息，搜索废弃的代码，例如

报错提示：Use viewPropTypes instead of View.propTypes.

搜索命令：grep -r 'View.propTypes' .

替换搜索出来的代码即可。

这是用于查找项目里的错误或者被废弃的代码的好方法

- 解决ReactNative的TextInput在0.55中文无法输入的问题

此问题主要体现在iOS中文输入法无法输入汉字，是0.55版RN的一个bug

解决方案：使用下面的MyTextInput替换原TextInput

  1. import React from 'react';
  2. import { TextInput as Input } from 'react-native';
  4. export default class MyTextInput extends React.Component {
  5.     static defaultProps = {
  6.         onFocus: () => { },
  7.     };
  9.     constructor(props) {
  10.         super(props);
  12.         this.state = {
  13.             value: this.props.value,
  14.             refresh: false,
  15.         };
  16.     }
  18.     shouldComponentUpdate(nextProps, nextState) {
  19.         if (this.state.value !== nextState.value) {
  20.             return false;
  21.         }
  23.         return true;
  24.     }
  26.     componentDidUpdate(prevProps) {
  27.         if (prevProps.value !== this.props.value && this.props.value === '') {
  28.             this.setState({ value: '', refresh: true }, () => this.setState({ refresh: false }));
  29.         }
  30.     }
  32.     focus = (e) => {
  33.         this.input.focus();
  34.     };
  36.     onFocus = (e) => {
  37.         this.input.focus();
  39.         this.props.onFocus();
  40.     };
  42.     render() {
  43.         if (this.state.refresh) {
  44.             return null;
  45.         }
  47.         return (
  48.             <Input
  49.                 {...this.props}
  50.                 ref={(ref) => { this.input = ref; }}
  51.                 value={this.state.value}
  52.                 onFocus={this.onFocus}
  53.             />
  54.         );
  55.     }
  56. }

ReactNative集成第三方DEMO编译时遇到RCTSRWebSocket错误的解决方法

报错信息如下

  1. Ignoring return value of function declared with warn_unused_result attribute

解决方案：

StackOverFlow上的解决方法：

  1. 在navigator双击RCTWebSocket project，移除build settings > custom compiler 下的flags

版权声明：

转载时请注明作者Kovli以及本文地址：

http://www.kovli.com/2018/06/25/rn-anything/

ReactNative开发笔记（持续更新...）的更多相关文章

  1. React-Native开发笔记 持续更新

    1.css单位转换px2dp 在做页面开发的时候习惯了用rem去做css单位,处理各种尺寸数据,到了React-Native里面做app开发时,rem就不好用了,这个时候就需要转换成另外一个单位,基本 ...

  2. BLE资料应用笔记 -- 持续更新

    BLE资料应用笔记 -- 持续更新 BLE 应用笔记 小书匠 简而言之,蓝牙无处不在,易于使用,低耗能和低使用成本.'让我们'更深入地探索这些方面吧. 蓝牙无处不在-,您可以在几乎每一台电话.笔记本电 ...

  3. [读书]10g/11g编程艺术深入体现结构学习笔记(持续更新...)

    持续更新...) 第8章 1.在过程性循环中提交更新容易产生ora-01555:snapshot too old错误.P257 (这种情况我觉得应该是在高并发的情况下才会产生) 假设的一个场景是系统一 ...

  4. react-native-storage 使用笔记 持续更新

    React-native-storage是在AsyncStorage之上封装的一个缓存操作插件库,刚开始接触这个也遇到了一些问题,在这里简单记录总结一下,碰到了就记下来,持续更新吧 1.安卓下stor ...

  5. web前端开发随手笔记 - 持续更新

    本文仅为个人常用代码整理,供自己日常查阅 html 浏览器内核 <!--[if IE]><![endif]--> <!--[if IE 6]><![endif ...

  6. webpack4搭建Vue开发环境笔记~~持续更新

    项目git地址 一.node知识 __dirname: 获取当前文件所在路径,等同于path.dirname(__filename) console.log(__dirname); // Prints ...

  7. BLE资料应用笔记 -- 持续更新（转载）

    简而言之,蓝牙无处不在,易于使用,低耗能和低使用成本.’让我们’更深入地探索这些方面吧. 蓝牙无处不在—,您可以在几乎每一台电话.笔记本电脑 .台式电脑和平板电脑中找到蓝牙.因此,您可以便利地连接键盘 ...

  8. 数据分析之Pandas和Numpy学习笔记(持续更新)<1>

    pandas and numpy notebook        最近工作交接,整理电脑资料时看到了之前的基于Jupyter学习数据分析相关模块学习笔记.想着拿出来分享一下,可是Jupyter导出来h ...

  9. react-navigation 使用笔记 持续更新中

    目录 基本使用(此处基本使用仅针对导航头部而言,不包含tabbar等) header怎么和app中通信呢? React-Navigation是目前React-Native官方推荐的导航组件,代替了原用 ...

随机推荐

  1. C++一种高精度计时器

    在windows下可以通过QueryPerformanceFrequency()和QueryPerformanceCounter()等系列函数来实现计时器的功能. 根据其函数说明,其精度能够达到微秒级 ...

  2. arcgis api 3.x for js 入门开发系列十五台风轨迹

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  3. RabbitMQ for Mac OS Install

    使用brew来安装 RabbitMQ brew install rabbitmq 执行看到如下命令: Updating Homebrew... ==> Auto-updated Homebrew ...

  4. kkkK的随笔

    自我介绍 学号:211606310 姓名:柯伟敏 爱好:篮球,足球 最爱的菜:4堂的饺子 最想说的话:一切都是最好的安排 初入大学 -------------------- 选择 选择软件工程这个专业 ...

  5. TSC条码打印机C#例程(tsclib.dll调用) 【转】

    //----  program.cs using System;using System.Collections.Generic;using System.Windows.Forms; using S ...

  6. C学习笔记（逗号表达式）

    (1)书写: ① int i; i=(i=*,i*); printf("%d\n",i); i=60; ② int i; i=i=*,i*; printf("%d\n&q ...

  7. js坚持不懈之17：onmousedown、onmouseup 以及 onclick 事件

    <!DOCTYPE html> <html> <body> <div onmouseover = "mOver(this)" onmous ...

  8. c++11の关联容器

    一.关联容器 C++的容器类型可以分为顺序容器和关联容器两大类.对于关联容器,主要有map和set,对于这两种,根据不同的维度,衍生出了8种容器 map                        ...

  9. Pyinstaller 打包exe

    安装 ​ pip insatll Pyinstaller 参数 pyinstaller -Fw main.py 参数 概述 -F,-onefile 打包一个单个文件,如果你的代码都写在一个.py文件的 ...

  10. Java 7 和 Java 8 中的 HashMap原理解析

    HashMap 可能是面试的时候必问的题目了,面试官为什么都偏爱拿这个问应聘者?因为 HashMap 它的设计结构和原理比较有意思,它既可以考初学者对 Java 集合的了解又可以深度的发现应聘者的数据 ...