使用react-native做一个简单的应用－05 navigator的使用

今天生病了，难受。。。

Navigator顾名思义就是导航器的意思。

在Android和iOS中，导航器的样式是不一样的 ，有一个比较好的网址可以提供大家学习（网址），由于样式的不统一，于是我决定自己做一个样式，就不再使用原生的样式了。

 import React from 'react-native'
 import WelcomeScreen from './screens/WelcomeScreen'
 import MainRoute from './screens/MainRoute'
 import RegisterScreen from './screens/UserLRScreen/RegisterScreen'
 import LoginScreen from './screens/UserLRScreen/LoginScreen'
 import SearchScreen from './screens/SearchScreen'
 import CommodityScreen from './screens/CommodityScreen'
 import GraphicWebView from './screens/GraphicWebView'
 import BuyWebView from './screens/BuyWebView'
 import CategoryScreen from './screens/CategoryScreen'

 var {
   Text,
   View,
   Navigator,
   TouchableOpacity,
   PropTypes,
   Platform
 } = React

 class Route extends React.Component {
   static propTypes = {
     navigator: PropTypes.object,
     commodity: PropTypes.string
   };
   render () {
     return (
       <Navigator
         initialRoute={{id: Platform.OS === 'ios' ? 'MainRoute' : 'WelcomeScreen', name: 'Index'}}
         renderScene={ this.renderScene.bind(this) }
         configureScene={(route) => {
           return Navigator.SceneConfigs.FloatFromRight
         }} />
     )
   }

   renderScene (route, navigator) {
     var routeId = route.id
     if (routeId === 'WelcomeScreen') {
       return (
         <WelcomeScreen
           navigator={navigator} />
       )
     }
     if (routeId === 'MainRoute') {
       return (
         <MainRoute
           navigator={navigator}/>
       )
     }
     if (routeId === 'RegisterScreen') {
       return (
         <RegisterScreen
           navigator={navigator} />
       )
     }
     if (routeId === 'LoginScreen') {
       return (
         <LoginScreen
           navigator={navigator} />
       )
     }
     if (routeId === 'SearchScreen') {
       return (
         <SearchScreen
           navigator={navigator} />
       )
     }
     if (routeId === 'CommodityScreen') {
       return (
         <CommodityScreen
           route={route}
           navigator={navigator} {...route.passProp}/>
       )
     }
     if (routeId === 'GraphicWebView') {
       return (
         <GraphicWebView
           route={route}
           navigator={navigator} {...route.passProp}/>
       )
     }
     if (routeId === 'BuyWebView') {
       return (
         <BuyWebView
           route={route}
           navigator={navigator} {...route.passProp}/>
       )
     }
     if (routeId === 'CategoryScreen') {
       return (
         <CategoryScreen
           route={route}
           navigator={navigator} {...route.passProp}/>
       )
     }
     return this.noRoute(navigator)
   }

   noRoute (navigator) {
     return (
       <View style={{flex: 1, alignItems: 'stretch', justifyContent: 'center'}}>
         <TouchableOpacity style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}
             onPress={() => navigator.pop()}>
           <Text style={{color: 'red', fontWeight: 'bold'}}>请在 index.js 的 renderScene 中配置这个页面的路由</Text>
         </TouchableOpacity>
       </View>
     )
   }
 }

 module.exports = Route

不要看着代码很长，其实需要理解的就是一点点

首先介绍一下下面的代码，其中initialRoute，表示首先去加载的是哪一个界面（当然是欢迎界面了），由于iOS有默认的欢迎界面我们就不需要欢迎界面了，因此在这里判断一下是在哪个平台运行的。renderScene就是你需要显示的界面了，在这里我用id去区分每一个界面。configureScene：这个是页面之间跳转时候的动画。可以选择自己喜欢的跳转风格。

    <Navigator
         initialRoute={{id: Platform.OS === 'ios' ? 'MainRoute' : 'WelcomeScreen', name: 'Index'}}
         renderScene={ this.renderScene.bind(this) }
         configureScene={(route) => {
           return Navigator.SceneConfigs.FloatFromRight
         }} />