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

Question

是否可以将自定义开发人员选项添加到您的 React Native 应用程序中？例如，我想添加更改应用程序连接到的端点的可能性，以便我可以在我的手机上在本地主机、暂存、生产等之间切换 phone

Answer 1

有了 webpack 你可以使用 proccess.environment 插件，这样你就可以使用

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

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

在构建和缩小之前，它将在生产环境中转译为 if ('prod' === 'dev') {}，由于 'always false' 规则，它将从代码中删除。

Answer 2

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

react-native-config

Answer 3

你也可以使用webpack的define插件： 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 会使您的构建过多膨胀： "Using a Babel transform, we were able to remove code living behind DEV statements, effectively reducing bundle size, which improves JavaScript parse time" 来自 https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/

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

Set up custom developer options in React Native

javascript

developer-tools

reactjs

react-native