react native之Navigation和NavigationIOS
前言
一、Navigator(你还可能在很多地方听说过Navigator，这个老组件会逐步被React Navigation替代)
1.1 常用的属性
name: 'home', component: HomeScene, passProps:{key:value} //跳转传值，接收页面获取this.props.key }}
1.2 常用的导航器方法 当获取了导航器对象的引用，我们可以进行调用以下一些方法来实现页面导航功能: 1.3 默认的写法 <Navigator
initialRoute={{
name:'商家',component:ShopView
}}
configureScene={()=>{
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route,navigator)=>{
let Component=route.component;
return <Component {...route.passProps} navigator={navigator}/>
}}
/>
//跳转到二级界面
pushToDetail(){
this.props.navigator.push({
name:"首页详情",component:HomeDetail
})
}
//返回到首页
popToHome(){
this.props.navigator.pop() //返回页面，并且卸载删除当前的页面
}
所有子组件拿到navigator都是this.props.navigator。如果是navigator注册的当前组件要跳转要用ref获取navigator. Navigator代码: import React,{ Component } from 'react';
import {
AppRegistry,StyleSheet,Text,View,Image,Platform,//判断当前运行的系统
} from 'react-native';
//导入组件类
import TabNavigator from 'react-native-tab-navigator';
import { Navigator } from 'react-native-deprecated-custom-components';
//引入其他页面类
var HomeView=require("../Home/Home");
var MoreView=require("../More/More");
var MyView=require("../My/My");
var ShopView=require("../Shop/Shop");
var Main=React.createClass({
getInitialState(){
console.log(Platform)
return{
//默认的TabBar
selectedTab:"home"
}
},render() {
return (
<TabNavigator>
{/*首页*/}
<TabNavigator.Item
selected={this.state.selectedTab === 'home'}
title="首页"
renderIcon={() => <Image style={styles.tabIconHome} source={{uri:"icon_tabbar_homepage"}} />}
renderSelectedIcon={() => <Image style={styles.tabIconHome} source={{uri:"icon_tabbar_homepage_selected"}} />}
onPress={() => this.setState({ selectedTab: 'home' })}
selectedTitleStyle={{color:"#dd4822"}}
>
<Navigator
initialRoute={{
name:'首页',component:HomeView
}}
configureScene={()=>{
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route,navigator)=>{
let Component=route.component;
return <Component {...route.passProps} navigator={navigator}/>
}}
/>
</TabNavigator.Item>
{/*商家*/}
<TabNavigator.Item
selected={this.state.selectedTab === 'Shop'}
title="商家"
onPress={() => this.setState({ selectedTab: 'Shop' })}
renderIcon={() => <Image style={styles.tabIconHome} source={{uri:"icon_tabbar_merchant_normal"}} />}
renderSelectedIcon={() => <Image style={styles.tabIconHome} source={{uri:"icon_tabbar_merchant_selected"}} />}
selectedTitleStyle={{color:"#dd4822"}}
>
<Navigator
initialRoute={{
name:'商家',component:ShopView
}}
configureScene={()=>{
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route,navigator)=>{
let Component=route.component;
return <Component {...route.passProps} navigator={navigator}/>
}}
/>
</TabNavigator.Item>
{/*我的*/}
<TabNavigator.Item
selected={this.state.selectedTab === 'My'}
title="我的"
onPress={() => this.setState({ selectedTab: 'My' })}
renderIcon={() => <Image style={styles.tabIconHome} source={{uri:"icon_tabbar_misc"}} />}
renderSelectedIcon={() => <Image style={styles.tabIconHome} source={{uri:"icon_tabbar_misc_selected"}} />}
selectedTitleStyle={{color:"#dd4822"}}
>
<Navigator
initialRoute={{
name:'我的',component:MyView
}}
configureScene={()=>{
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route,navigator)=>{
let Component=route.component;
return <Component {...route.passProps} navigator={navigator}/>
}}
/>
</TabNavigator.Item>
{/*更多*/}
<TabNavigator.Item
selected={this.state.selectedTab === 'More'}
title="更多"
onPress={() => this.setState({ selectedTab: 'More' })}
renderIcon={() => <Image style={styles.tabIconHome} source={{uri:"icon_tabbar_homepage"}} />}
renderSelectedIcon={() => <Image style={styles.tabIconHome} source={{uri:"icon_tabbar_homepage_selected"}} />}
selectedTitleStyle={{color:"#dd4822"}}
>
<Navigator
initialRoute={{
name:'更多',component:MoreView
}}
configureScene={()=>{
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route,navigator)=>{
let Component=route.component;
return <Component {...route.passProps} navigator={navigator}/>
}}
/>
</TabNavigator.Item>
</TabNavigator>
);
}
});
const styles = StyleSheet.create({
tabIconHome:{
width:Platform.OS==="ios"?30:25,height:Platform.OS==="ios"?30:25
}
});
module.exports=Main;
二、Navigator.IOSNavigatorIOS包装了UIKit的导航功能，可以使用左划功能来返回到上一界面。 2.1 常用的导航器方法
2.2 常用的属性
NavigatorIOS使用"路由"对象来包含要渲染的子视图、它们的属性、以及导航条配置。"push"和任何其它的导航函数的参数都是这样的路由对象。 比如：下面新闻列表跳转到新闻详情页详情页： //导入新闻详情页
var XMGNewsDetail=require("./XMGNewsDetail");
//在新闻详情页面直接 this.props.rowData 来获取参数 通过导航进行跳转
作者：旋之华 链接：http://www.jianshu.com/p/e1bfbe164010 來源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |