React-Native问题和解决方案收集

react-native 调试模式正常、非调试模式报错 ** ReactNativeJNI: Got JS Exception ** unexpected token "*"

从错误入手，C层源码:

static JSValueRefevaluateScriptWithJSC(

   JSGlobalContextRef ctx,

   JSStringRef script,

   JSStringRef sourceURL) {

  JSValueRef exn;

  auto result = JSEvaluateScript(ctx, script, nullptr, sourceURL, 0, &exn);//

  if (result == nullptr) { // 结果为空的时候，报改错 -- > 指向上一行   -- > 加载js报错  

   JSValueProtect(ctx, exn);

   std::string exceptionText = Value(ctx, exn).toString().str();

   FBLOGE("Got JS Exception: %s", exceptionText.c_str());

  }

  return result;

}

由C层源码分析，该错误普遍出现在js的代码中，存在错误的语法

最后通过排查代码:

 发现在一次运算中使用了 “**” 来处理数据的平方 造成该问题

问题：那为什么调试模式可以正常编译，非调试模式报错呢？

最后通过网络，看到由网友提示到，javascript的解析器问题，

我们debug模式调试的时候，使用的javascript的解析器实际上是运行在浏览器的解析引擎，

非debug模式调试的时候，使用的javascript的解析器实际上是手机自带的解析器(通常为javascript core引擎)

两个解析引擎的差异，导致了这次错误的出现。

后面尽量使用各大引擎通用的语法，比如数字计算使用Math函数。

---

react-native zIndex属性失效问题

问题描述:
在两个不同的项目中，写入同样的UI，外层均适用了以下样式

style={{ position:'absolute', zIndex: 10}}

但是一个项目正常显示到顶层，另一个项目不能够正常显示到顶层

原因分析:
最后通过比较两个项目的代码，发现了问题，
相同的UI,正常显示的外层包裹了路由组件，即通过StackNavigator加载的首个界面
而显示不正常的是直接加载的UI

解决:
分析react-navigation源码，发现在每个组件的外层包裹了以下样式

 // Card.js文件
  const styles = StyleSheet.create({
  main: {
    backgroundColor: '#E9E9EF',
    bottom: 0,
    left: 0,
    position: 'absolute',
    right: 0,
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.2,
    shadowRadius: 5,
    top: 0
  }
});

为了在未包裹路由的UI里显示正常，需要在父节点加入backgroundColor或者zIndex属性之一

  style={{ 
 // backgroundColor: '#E9E9EF',
  zIndex: 1,
  }}

具体原因尚不明确，有了解的朋友希望能帮我解答一下，我会补上来供他人共同学习～