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

今天生病了，难受。。。

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

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

  1 import React from 'react-native'
  2 import WelcomeScreen from './screens/WelcomeScreen'
  3 import MainRoute from './screens/MainRoute'
  4 import RegisterScreen from './screens/UserLRScreen/RegisterScreen'
  5 import LoginScreen from './screens/UserLRScreen/LoginScreen'
  6 import SearchScreen from './screens/SearchScreen'
  7 import CommodityScreen from './screens/CommodityScreen'
  8 import GraphicWebView from './screens/GraphicWebView'
  9 import BuyWebView from './screens/BuyWebView'
 10 import CategoryScreen from './screens/CategoryScreen'
 11 
 12 var {
 13   Text,
 14   View,
 15   Navigator,
 16   TouchableOpacity,
 17   PropTypes,
 18   Platform
 19 } = React
 20 
 21 class Route extends React.Component {
 22   static propTypes = {
 23     navigator: PropTypes.object,
 24     commodity: PropTypes.string
 25   };
 26   render () {
 27     return (
 28       <Navigator
 29         initialRoute={{id: Platform.OS === 'ios' ? 'MainRoute' : 'WelcomeScreen', name: 'Index'}}
 30         renderScene={ this.renderScene.bind(this) }
 31         configureScene={(route) => {
 32           return Navigator.SceneConfigs.FloatFromRight
 33         }} />
 34     )
 35   }
 36 
 37   renderScene (route, navigator) {
 38     var routeId = route.id
 39     if (routeId === 'WelcomeScreen') {
 40       return (
 41         <WelcomeScreen
 42           navigator={navigator} />
 43       )
 44     }
 45     if (routeId === 'MainRoute') {
 46       return (
 47         <MainRoute
 48           navigator={navigator}/>
 49       )
 50     }
 51     if (routeId === 'RegisterScreen') {
 52       return (
 53         <RegisterScreen
 54           navigator={navigator} />
 55       )
 56     }
 57     if (routeId === 'LoginScreen') {
 58       return (
 59         <LoginScreen
 60           navigator={navigator} />
 61       )
 62     }
 63     if (routeId === 'SearchScreen') {
 64       return (
 65         <SearchScreen
 66           navigator={navigator} />
 67       )
 68     }
 69     if (routeId === 'CommodityScreen') {
 70       return (
 71         <CommodityScreen
 72           route={route}
 73           navigator={navigator} {...route.passProp}/>
 74       )
 75     }
 76     if (routeId === 'GraphicWebView') {
 77       return (
 78         <GraphicWebView
 79           route={route}
 80           navigator={navigator} {...route.passProp}/>
 81       )
 82     }
 83     if (routeId === 'BuyWebView') {
 84       return (
 85         <BuyWebView
 86           route={route}
 87           navigator={navigator} {...route.passProp}/>
 88       )
 89     }
 90     if (routeId === 'CategoryScreen') {
 91       return (
 92         <CategoryScreen
 93           route={route}
 94           navigator={navigator} {...route.passProp}/>
 95       )
 96     }
 97     return this.noRoute(navigator)
 98   }
 99 
100   noRoute (navigator) {
101     return (
102       <View style={{flex: 1, alignItems: 'stretch', justifyContent: 'center'}}>
103         <TouchableOpacity style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}
104             onPress={() => navigator.pop()}>
105           <Text style={{color: 'red', fontWeight: 'bold'}}>请在 index.js 的 renderScene 中配置这个页面的路由</Text>
106         </TouchableOpacity>
107       </View>
108     )
109   }
110 }
111 
112 module.exports = Route

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

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

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

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

相关推荐