使用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
        }} />