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

如何在顶部创建一个全局Routes数组呢

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，您将获得更好的原生感觉和平滑过渡

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

1 个答案: