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 
    } 

創建全局路由數組，然後只用在renderSecene這個代碼簡單的線條讓它運行什麼

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

也可以不是最好的解決方案，但我在我的應用程序中做得很好，使用此功能

這就是我的導航器的外觀

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

您只需按下場景做這樣

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

這個單行堆疊可以消除屏幕出棧的

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

******我會建議你更好地使用react-navigation或react-native-navigation你會得到更好的本地感和平穩過渡