React Native正しいタグをレンダリングするコードを最適化

Question

この小さなコードを最適化しようとしましたが、うまく機能しないものは見つかりませんでした。私の目標は、読みやすさのためだけに最適化することです。

_renderScene(route, navigator) { 
    switch (route.id) { 
     case 'Biotiful': 
      return (<Home navigator={navigator} route={route} { ...this.props} emitter= {_emitter}/>); 
     case 'ProdottoPreferiti': 
      return (<Prodotto {...route.passProps} { ...this.props} navigator={navigator} route={route} emitter= {_emitter}/>); 
     case 'Camera': 
      return (<Camera navigator={navigator} { ...this.props} route={route} emitter= {_emitter}/>); 
     case 'Istruzioni': 
      return (<Istruzioni navigator={navigator} { ...this.props} route={route} emitter= {_emitter}/>); 
     case 'Prodotto': 
      return (<Prodotto {...route.passProps} { ...this.props} navigator={navigator} route={route} emitter= {_emitter}/>); 
     case 'Profilo': 
      return (<Profilo {...route.passProps} { ...this.props} navigator={navigator} route={route} emitter= {_emitter}/>); 
     case 'Webview': 
      return (<Webview {...route.passProps} { ...this.props} navigator={navigator} route={route} emitter= {_emitter}/>); 
     case 'Impostazioni': 
      return (<Impostazioni navigator={navigator} { ...this.props} emitter= {_emitter}/>); 
     case 'Preferiti': 
      return (<Preferiti navigator={navigator} { ...this.props} emitter= {_emitter}/>); 
     case 'BarCode': 
      return (<BarCode navigator={navigator} { ...this.props} emitter= {_emitter}/>); 
     case 'ChiSiamo': 
      return (<ChiSiamo navigator={navigator} { ...this.props} emitter= {_emitter}/>); 
     case 'NuovoProdotto': 
      return (<NuovoProdotto navigator={navigator} { ...this.props} emitter= {_emitter}/>); 
     case 'Suggerimento': 
      return (<Suggerimento navigator={navigator} { ...this.props} emitter= {_emitter}/>); 
    } 
} 

私はroute.idを使用して動的タグ名を入れしようとしましたが、それを行うことができない、または少なくとも私はそれを行うための方法を見つけていませんでした。

誰かがより良い方法を見ることができますか？よりコンパクト？ おかげ

Answer 1

何この

import LandingScreen from 'src/screens/landingScreen'; 
import Login from 'src/screens/login' 
import SignUp from 'src/screens/signUp' 
import ForgotPassword from 'src/screens/forgotPassword' 
import UserProfile from 'src/screens/userProfile' 

//everything is pretty similar to yours but I just moved everything to the top and outside of _renderScene function  
let Routes ={ 
     landingScreen:LandingScreen, 
     login:Login, 
     signUp:SignUp, 
     forgotPassword:ForgotPassword, 
     userProfile:UserProfile 
    } 

のように上部のグローバルルートの配列を作成し、それはそれはないかもしれません

_renderScene(route, navigator) { 
     const Component = Routes[route.Name] 
     return <Component route={route} navigator={navigator} { ...this.props} emitter= {_emitter}/> 
    } 

を実行し得るためにrenderSeceneにコードのこのシンプルなラインの使用方法について最高の解決策ですが、私はこれで私のアプリケーションでこれでかなりうまくやっています

これは私のナビゲータの外観です

<Navigator 
        ref="navigator" 
        configureScene={(route) => { 
         return Navigator.SceneConfigs.FadeAndroid; 
        }} 
        initialRoute={{Name :'landingScreen'}} 
        renderScene={this._renderScene} 
        /> 

あなたは単に私が提案します******この一行は、スタック

this.props.navigator.pop({Name :'userProfile'}); 
//this.props.navigator.pop(0); will remove the current scene 

のうち、画面を削除することができ、この

this.props.navigator.push({Name :'userProfile', ...props, ...states}); 

ようにすることによりスタックするシーンをプッシュすることができますreact-navigationまたはreact-native-navigationを使用すると、ネイティブ感がより滑らかになり、スムーズに移行します