React native React Native优化代码以呈现正确的标记

我试图优化这段小代码，但没有发现任何有效的方法。我的目标只是为了可读性而优化它

_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}/> );
    }
}

\u渲染场景（路线、导航器）{
交换机（route.id）{
“生物性”案例：
返回（）；
“ProdottoPreferiti”案例：
返回（）；
“照相机”案例：
返回（）；
“Istruzioni”案：
返回（）；
“普罗多托”案：
返回（）；
案例“Profilo”：
返回（）；
案例“Webview”：
返回（）；
“Impostazioni”案：
返回（）；
“Preferiti”案例：
返回（）；
“条形码”案例：
返回（）；
“ChiSiamo”案：
返回（）；
“NuovoProdotto”案：
返回（）；
案例“Suggerimento”：
返回（）；
}
}

我尝试使用

route.id

放置一个动态标记名，但无法完成，或者至少我没有找到一种方法

有人能找到更好的方法吗？更紧凑？

---

谢谢

像这样在顶部创建一个全局路由数组怎么样

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
    }

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

然后在RenderScene中使用这行简单的代码来运行它

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

这一行可以将屏幕移出堆栈

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

---

******我建议您更好地使用，否则您将获得更好的本机感觉和平滑过渡

我遇到了一个奇怪的行为：

\u renderScene（route，navigator）{const Component=“Home”return}

将导致这种行为：

预期组件类得到对象

。如果我替换

查看您是否遵循了我的所有步骤，那么您必须像const Component=Routes[route.Name]那样执行操作，我事先已将所有页面保存到我的Routes数组中
this.props.navigator.pop({Name :'userProfile'});
//this.props.navigator.pop(0);   will remove the current scene