ReactNative 易错点整理（踩坑之旅）

1、常用书写

1.1 自定义组件名时首字母要大写，否则会报错。
1.2 render()函数里面的return关键字后面的代码必须在()内包括，否则会报错！

import React , { Component } from 'react';

class HelloMessage extends  Component{
  render () {
    return (  //return后面一定要带括号()
      
 hello {this.props.name}
      )
  }
}

export default HelloMessage;

2、ES6里面的箭头函数问题

()=>()单行函数，相当于函数体内加了return 字段，返回对象
()=>{}多行函数，多行函数默认不带return字段，如果返回值是要手动加入return 字段的，否则没有任何值返回！！！如果需要返回使用下面写法

()=>{
  return ...
}

自己曾犯得书写错误：

const shareImage = [
  require('../../imgs/share/weixin.png'),
  require('../../imgs/share/pengyouquan.png'),
  require('../../imgs/share/qq.png'),
  require('../../imgs/share/kongjian.png') 
]
 
        {
            shareImage.map(item=>{
                    
             })
         }        
  

在上面的代码中我想使用map方法遍历数组，然后生成对应数组的图片，我使用的是{},发现图片并没有生成，检查好长时间才发现，没有使用return关键字来返回生成的图片，这里改为()就代表默认是使用了return的啦。书写的时候容易忽略！！！
2、this问题

3、React Native代码中不允许出现console.log();，否则真机运行会出现莫名错误如导航不能push跳转页面等。

4、在发送http请求的时候(我遇到的是在分享到QQ平台时url访问不了)忘记对url进行编码，这样导致url中的特殊字符+ : / ; ?&被转义，导致url访问不了。

解决办法:

javascript可以使用的内置函数有
encodeURI()
encodeURIComponent()
他们都是用utf-8的编码方式
 
encodeURI()，用来encode整个URL，不会对下列字符进行编码：+ : / ; ?&。它只会对汉语等特殊字符进行编码
encodeURIComponent ()，用来enode URL中想要传输的字符串，它会对所有url敏感字符进行encode
在对url做encode操作时，一定要根据情况选择不同的方法。
例如url = 'www.xxx.com/aaa/bbb.do?parm1=罗'
此时可以用encodeURI(url)
当你的参数中包含+ : / ; ?&请使用 encodeURIComponent 方法对这些参数单独进行编码。
例如url = 'www.xxx.com/aaa/bbb.do?parm1=www.xxx.com/ccc/ddd?param=abcd'
encodeURI(url)绝对无法满足要求，因为param1=www.xxx.com/ccc/ddd?param=abcd，这个参数是不能按照我们的要求encode的，
此时应该这样单独对参数进行encode
url = 'www.xxx.com/aaa/bbb.do?parm1=' + encodeURIComponen('www.xxx.com/ccc/ddd?param=abcd')


编码后的url的值为
www.xxx.com/aaa/bbb.do?parm1=www.xxx.com%2Fccc%2Fddd%3Fparam%3Dabcd
此时接受此请求的服务端就能够成功取得param1=www.xxx.com/ccc/ddd?param=abcd

5、在使用组件时，更新数据源数组里某项的某个字段的值时，页面UI不进行更新。

两种解决办法，
5.1 给组件指定 数据源

  index.toString()}
      data={this.state.dataList}
      renderItem={(data) => < ListItem data={data} cellClick={(item) => this.cellClick(item)}/>}
 />

5、2 更改数据的时候使用深拷贝，保证在内存里不是同一个内存地址

cellClick(item) {
    item.extend = !item.extend;
    const index = this.state.dataList[item];
    // 不可以值引用， 深拷贝
  //  解构相当于新的的内存地址
    let tempData = [...this.state.dataList];
    tempData[index] = item;
    this.setState({ dataList: tempData });
  }

6、RN项目在xcode 11.4.1 上编译成功了，但是在 IPhone 模拟器运行后报错了

xcode控制台报错：

2020-03-08 09:32:21.481 [error][tid:main][RCTModuleMethod.mm:375] Unknown argument type '__attribute__' in method -[RCTAppState getCurrentAppState:error:]. Extend RCTConvert to support this type.
2020-03-08 09:32:21.481540+0800 NativeTest[6056:30774] Unknown argument type '__attribute__' in method -[RCTAppState getCurrentAppState:error:]. Extend RCTConvert to support this type.
2020-03-08 09:32:21.514 [fatal][tid:main] Exception '*** -[__NSArrayM objectAtIndexedSubscript:]: index 1 beyond bounds [0 .. 0]' was thrown while invoking getCurrentAppState on target AppState with params (
    2,
    3
)
callstack: (
    0   CoreFoundation                      0x00007fff23c7127e __exceptionPreprocess + 350
    1   libobjc.A.dylib                     0x00007fff513fbb20 objc_exception_throw + 48
    2   CoreFoundation                      0x00007fff23d03ab1 _CFThrowFormattedException + 194
    3   CoreFoundation                      0x00007fff23b85749 -[__NSArrayM objectAtIndexedSubscript:] + 169
    4   NativeTest                          0x00000001011d00df -[RCTModuleMethod processMethodSignature] + 13327
    5   NativeTest                          0x00000001011d4e9d -[RCTModuleMethod invokeWithBridge:module:arguments:] + 189
    6   NativeTest                          0x000000010126fd17 _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicE + 791
    7   NativeTest                          0x000000010126f823 _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 131
    8   NativeTest                          0x000000010126f799 ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 25
    9   libdispatch.dylib                   0x00000001020bddd4 _dispatch_call_block_and_release + 12
    10  libdispatch.dylib                   0x00000001020bed48 _dispatch_client_callout + 8
    11  libdispatch.dylib                   0x00000001020ccde6 _dispatch_main_queue_callback_4CF + 1500
    12  CoreFoundation                      0x00007fff23bd4049 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 9
    13  CoreFoundation                      0x00007fff23bceca9 __CFRunLoopRun + 2329
    14  CoreFoundation                      0x00007fff23bce066 CFRunLoopRunSpecific + 438
    15  Foundation                          0x00007fff2576b86f -[NSRunLoop(NSRunLoop) runMode:beforeDate:] + 211
    16  Foundation      

ios模拟器报错如下:

image.png

解决方案1：

升级RN的版本到 0.59.9 或者最新版 0.60.x

解决方案2：

参考官网的修改代码https://github.com/facebook/react-native/pull/25146/files，手动将代码 node_modules/react-native/React/Base/RCTModuleMethod.mm的 RCTParseUnused方法，大约在 91 行：

static BOOL RCTParseUnused(const char **input)
{
  return RCTReadString(input, "__unused") ||
         RCTReadString(input, "__attribute__((unused))");
}

修改为

static BOOL RCTParseUnused(const char **input)
{
  return RCTReadString(input, "__attribute__((unused))") ||
         RCTReadString(input, "__attribute__((__unused__))") ||
         RCTReadString(input, "__unused");
}

重新编译后，运行正常了。
参考--https://www.cpming.top/p/rn-error-unknown-argument-type-attribute

7、React Native在iOS端真机编译时报错：Can't find 'node' binary to build React Native bundle

在模拟器开发编译正常，但是在打包的时候报上面错误。

image

仔细认真的看开发工具给出的错误提示：

error: Can't find 'node' binary to build React Native bundle 
If you have non-standard nodejs installation, 
select your project in Xcode, find 'Build Phases' - 'Bundle React Native code and images' and change NODE_BINARY to absolute path to your node executable (you can find it by invoking 'which node' in the terminal)

image.png

仔细阅读发现已经告诉我们解决办法了，大概意思是：

如果你使用了非标准的 nodejs 安装流程，
在Xcode中选择Project -> Build Phases -> Bundle React Native code and images，
把NODE_BINARY改为node可执行文件的绝对路径
你可以在终端命令行中执行 `$ which node` 来查看你当前node的绝对路径

拿到node的本地安装路径之后进行下面的设置：
1、

image.png

2、

image.png

设置之后重新真机编译就正常通过了。

8、xcode11遇到React Native启动报错的问题

Unknown argument type '__attribute__' in method -[RCTAppState getCurrentAppState:error:]

Xcode升级导致项目运行不起来
报错如下图:

image.png

报错为

Unknown argument type 'attribute' in method -[RCTAppState getCurrentAppState:error:]. Extend RCTConvert to support this type.

解决办法:

这个BUG是Xcode.11引起的, 可以查看这个问题的提交记录，链接为：https://github.com/facebook/react-native/issues/25138

Xcode打开
Libraries->React.xcodeproj->React->Base ->RCTModuleMethod.mm
或者在Xcode直接搜索 RCTModuleMethod. 这个文件，
我们只需要找到 RCTModuleMethod.mm 这个文件,大约在93行左右

修改为：

static BOOL RCTParseUnused(const char **input)

{

  return RCTReadString(input, "__unused") ||

         RCTReadString(input, "__attribute__((__unused__))") ||

         RCTReadString(input, "__attribute__((unused))");

}

这个函数插入 RCTReadString(input, "__attribute__((__unused__))") 这行代码重新运行就行了。

这样项目就能启动了，而且打包的app也不会闪退了。