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