React Native `new Function()` 不支持 ES6 语法答案

【问题标题】：React Native `new Function()` does not support ES6 syntaxReact Native `new Function()` 不支持 ES6 语法
【发布时间】：2018-11-22 17:35:50
【问题描述】：

命令：

react-native init Test && react-native run-android

App.js：

export default class App extends Component {
    render() {
            new Function("person", "const { firstname } = person; alert(firstname);")({ firstname: "Test" });
    }
}

每当新函数被构造和调用时，应用程序就会崩溃，说明："SyntaxError: Unexpected token '{'. Expected an identifier name in const declaration" 仅在 Android 上发生。

任何帮助将不胜感激。谢谢！

React Native：v0.55.7

【问题讨论】：

标签： android react-native ecmascript-6

【解决方案1】：

react native documentation 表示JavaScriptCore 通常在运行时使用（V8 在调试期间），但它对如何配置的细节很清楚。它确实提到的一件事是在 iOS 上使用了原生 JavaScriptCore，而在 Android 上为用户捆绑了不同的版本。

因为Babel在编译时使用react native来支持ES5/ES6特性，可能是运行时配置的支持级别较低。因此，当尝试在运行时从字符串创建代码时，您实际上可能正在使用不理解解构语法的 JavaScript 解释器运行。

您可以尝试在运行时使用 Babel 的 transform 来转译您的代码：

import {transform} from 'babel-core';

export default class App extends Component {
  render() {
    const f = 'const { firstname } = person; alert(firstname);';

    const result = transform(f, {
        presets: ['es2015']
    });

    new Function("person", result.code)({ firstname: "Test" });
  }
}

【讨论】：

尽管 React Native 不支持 babel-core，但至少这可以解决问题。感谢您的帮助。
@JediahDizon 有任何理由在 render 方法中创建一个函数。

【解决方案2】：

你能创建一个具有动态名称的 const 吗？如果可能的话，很抱歉我对这个主题缺乏了解。错误消息说变量 const 的名称是预期的。我希望它有用。最好的问候。

【讨论】：

【解决方案3】：

尝试更改您创建该函数的样式。在 React Native 中常见的箭头函数，必须在你的渲染方法之外创建。请注意，每次状态更改时都会触发您的渲染方法。而且会浪费内存资源和不必要的计算时间

import React, { 
  Component 
} from 'react';

import { 
  Text, 
  View, 
  StyleSheet 
} from 'react-native';


export default class App extends Component {      

  //your custom function
  myFunc = (param) => {
    console.log(param)
    return param
  }

  //your render method
  render() {
    const param = "Im a text"

    //you could do this... i would never do that..
    const myFuncInRender = () => { console.log('Im a stupid func')}
    const myStupidFunc2 = new Function("person", "const { firstname } = person; alert(firstname);")({ firstname: "Test" });

    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          {this.myFunc(param)/* HERE is where you call the func*/}
        </Text>
      </View>
    );
  }
} // end from Class

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
    alignItems:'center',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

【讨论】：