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

是否可以将自定义开发人员选项添加到您的React Native应用程序？例如，我想添加更改应用程序连接的端点的可能性，以便我可以在本地主机，分段，生产等之间切换我的移动电话在React Native中设置自定义开发人员选项

2017-02-28 Mahoni

你是如何构建它的？ Webpack？ –

使用webpack，您可以使用proccess.environment插件，将能够使用

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

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

，将建造和缩小，这将从代码中删除之前transpiled到if ('prod' === 'dev') {}在PROD环境由于“永远为假”的规则。

来源

2017-03-05 07:23:36

在React Native中，您不使用Webpack，而是使用React Native包装程序。 – Mahoni

@Mahoni http://stackoverflow.com/a/37823398/815386似乎你已经和包装工人一样。 –

最好的方式来配置你的反应原生应用不同的环境是使用

react-native-config

来源

2017-03-07 19:31:14

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

如果你有大量的配置差异，配置2组webpack配置，一个用于生产，一个用于dev

new webpack.DefinePlugin({ 
    PRODUCTION: true)}

并在代码中的任何地方，你要处理的分离，只是用一个简单的if语句

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

来源

2017-03-08 17:55:30 Karis

做到这一点，最好的办法是某些字段添加到设置界面中的一些开关和文本字段中的应用配置您的开发人员设置。然后使用React Native的__DEV__变量来决定是否显示这些额外的字段。

的iOS自己开发部分是这样的一个例子：

这种方法的好处是，你可以更精细地配置您的应用程序个别选项。这是许多顶级应用程序在内部执行的操作，无论他们是否使用React Native。

来源

2017-03-08 22:26:42 ide

您可以使用__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腹胀您的生成过多： “使用巴贝尔变换，我们能够删除代码的生活背后DEV声明，有效地减少了包的大小，从而提高了JavaScript解析时间“ 从https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/

来源

2017-03-10 21:35:59 mcmhav

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

回答

相关问题