在React Native中设置自定义开发人员选项

Question

是否可以向React Native应用添加自定义开发人员选项？例如，我想添加更改应用程序连接的端点的可能性，以便我可以在手机上切换localhost，登台，生产等

Answer 1

使用webpack，您可以使用proccess.environment插件，这样您就可以使用

了

if (process.env.NODE_ENV === 'dev')  {
  makeYourThingIncludingRequereETC();
}

https://github.com/webpack/docs/wiki/list-of-plugins#environmentplugin

在构建和缩小之前，它将在prod环境中被转换为if ('prod' === 'dev') {}，由于“始终为假”规则，它将从代码中删除。

Answer 2

为不同环境配置react native应用程序的最佳方法是使用

react-native-config

Answer 3

您还可以使用webpack的定义插件： https://webpack.js.org/plugins/define-plugin/

如果您有很多配置差异，请配置2组webpack配置，一组用于生产，一组用于开发

new webpack.DefinePlugin({
    PRODUCTION: true)}

在代码中你想要处理分离的任何地方，只需使用简单的if语句

if (PRODUCTION) {
    --do your thing }
else {
    -- do your other thing}

Answer 4

执行此操作的最佳方法是在应用程序的设置屏幕中添加一些字段，并使用一些开关和文本字段来配置开发人员设置。然后使用React Native的__DEV__变量来决定是否显示这些额外的字段。

iOS自己的开发人员部分就是一个例子：

此方法的优点是您可以在应用中更精细地配置各个选项。这就是许多顶级应用程序在内部执行的操作，无论他们是否使用React Native。

Answer 5

您可以使用__DEV__变量（https://facebook.github.io/react-native/docs/javascript-environment。

一个小例子：

所以你可以做的是制作一个“DeveloperComponent”。

...
class DeveloperComponent extends Component {
  ...
  changeEnv(env) { 
    // change used urls/keys/other based on env
  }
  ...
  render() {
    return (
      <View>
        <DeveleoperOption1 onPress={this.changeEnv("prod")} />
        <DeveleoperOption2 onPress={this.changeEnv("dev")} />
        <DeveleoperOption3 onPress={/* do other devlike action */} />
      </View>
    );
  }
}
...

如果您希望它可以在任何地方使用，或者在设置页面中，则将其添加到您的上层组件之一。如果添加到较高级别，则“DeveloperComponent”可以是一个按钮，使用开发人员选项触发警报。

  ...
  return (
    <View style={styles.container}>
      <YourRouterContainer />
      {__DEV__ && <DeveloperComponentTrigger />}      
    </View>
  );
  ...

或

  ...
  return (
    <View style={styles.container}>
      <SomeOtherSettings />
      {__DEV__ && <DeveloperComponent />}      
    </View>
  );
  ...

你似乎不必担心devcomponents过度膨胀你的构建： “使用Babel转换，我们能够删除隐藏在 DEV 语句后面的代码，有效地减少了包大小，从而改善了JavaScript解析时间” 来自https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/