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

を使用することができます常にfalse "ルールによるコードから削除される、ビルドと縮小前のprod環境でif ('prod' === 'dev') {}にtranspiledされます。

Answer 2

あなたは、異なる環境でのネイティブアプリを反応させる構成するための最良の方法は、あなたがまたのプラグインを定義するのWebPACK使用することができます

react-native-config

Answer 3

使用することです： https://webpack.js.org/plugins/define-plugin/

あなたが設定差の多くを持っている場合は、プロダクション用、デベロッパ用の2つのwebpack設定を構成する

new webpack.DefinePlugin({ 
    PRODUCTION: true)} 

どこでもあなたのコードでは、あなたは分離を処理したい、これを行うための声明

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

Answer 4

最良の方法は、いくつかのスイッチとテキストフィールドを使用して、アプリの設定画面にいくつかのフィールドを追加する場合、単純なを使用します開発者の設定を構成します。次に、React Nativeの__DEV__変数を使用して、これらの余分なフィールドを表示するかどうかを決定します。

のiOS独自の開発セクションには、この例です：

この方法の利点は、あなたがより細かくあなたのアプリで個々のオプションを設定することができるということです。これは、React Nativeを使用しているかどうかにかかわらず、多くのトップアプリが内部的に行うことです。

Answer 5

あなたはhttps://facebook.github.io/react-native/docs/javascript-environment（このため__DEV__変数を使用することができます

小さな例：。。

をだから何あなたができることは "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/