在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中設置自定義開發人員選項

回答

相關問題