文档地址
一、Navigator
很多时候，我们需要导航器来应对不同场景（页面）间的切换。它通过路由对象来分辨不同的场景，我们这里采用的就是 renderScene 方法，根据指定的路由来渲染。
1.1 常用的属性
- initialRoute ={{ name: 'home', component: HomeScene }}
这个指定了默认的页面，也就是启动的组件页面 - configureScene ={() => {
return Navigator. SceneConfigs .HorizontalSwipeJump;
}}
页面之间跳转时候的动画手势，可以看这个目录:node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳转的时候的方向)，比如：PushFromRight FloatFromRight FloatFromLeft FloatFromBottom FloatFromBottomAndroid FadeAndroid HorizontalSwipeJump HorizontalSwipeJumpFromRight VerticalUpSwipeJump VerticalDownSwipeJump等等。
- renderScene
具体是方法如下:(route, navigator) => <MySceneComponent title={route.title} navigator={navigator} />
两个参数中的route包含的是initial的时候传递的name和component，而navigator是一个我们需要用的Navigator的对象；
所以当我们拿到route中的component的时候，我们就可以将navigator传递给它，正因为如此，我们的组件HomeScene才可以通过 this.props.navigator，拿到路由。
initialRouteStack [object] 参数对象数组
这是一个初始化的路由数组进行初始化。如果initalRoute属性没有设置的话，那么就必须设置initialRouteStack属性，使用该最后一项作为初始路由。 如果initalRouteStack属性没有设置的话，该会生成只包含initalRoute值的数组navigationBar node
该为可选的参数，在页面切换中用来提供一个导航栏navigator object
该为可选参数，可以从父类导航器中获取导航器对象sceneStyle 样式风格
该继承了View视图的所有样式风格，用于设置每个页面容器的风格
1.2 常用的导航器方法
当获取了导航器对象的引用，我们可以进行调用以下一些方法来实现页面导航功能:
- getCurrentRoutes() 该进行返回存在的路由列表信息
- jumpBack() 该进行回退操作 但是该不会卸载(删除)当前的页面
- jumpForward() 进行跳转到相当于当前页面的下一个页面
- jumpTo(route) 根据传入的一个路由信息，跳转到一个指定的页面(该页面不会卸载删除)
- push(route) 导航切换到一个新的页面中，新的页面进行压入栈。通过jumpForward()方法可以回退过去
- pop() 当前页面弹出来，跳转到栈中下一个页面，并且卸载删除掉当前的页面
- replace(route) 只用传入的路由的指定页面进行替换掉当前的页面
- replaceAtIndex(route,index) 传入路由以及位置索引，使用该路由指定的页面跳转到指定位置的页面
- replacePrevious(route) 传入路由，通过指定路由的页面替换掉前一个页面
- resetTo(route) 进行导航到新的界面，并且重置整个路由栈
- immediatelyResetRouteStack(routeStack) 该通过一个路由页面数组来进行重置路由栈
- popToRoute(route) 进行弹出相关页面，跳转到指定路由的页面，弹出来的页面会被卸载删除
- popToTop() 进行弹出页面，导航到栈中的第一个页面，弹出来的所有页面会被卸载删除
1.3 默认的写法
<Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) => {
return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.props} navigator={navigator} />
}}
/>
注意：在RN0.44之上的版本中，Navigator组件已经移植到react-native-deprecated-custom-components中，所以要遵循以下引入方式：
import {Navigator} from 'react-native-deprecated-custom-components';
二、Navigator.IOS
NavigatorIOS包装了UIKit的导航功能，可以使用左划功能来返回到上一界面。
2.1 常用的导航器方法
push(route)
导航器跳转到一个新的路由。pop()
回到上一页。popN(n)
回到N页之前。当N=1的时候，效果和 pop() 一样。replace(route)
替换当前页的路由，并立即加载新路由的视图。replacePrevious(route)
替换上一页的路由/视图。replacePreviousAndPop(route)
替换上一页的路由/视图并且立刻切换回上一页。resetTo(route)
替换最顶级的路由并且回到它。popToRoute(route)
一直回到某个指定的路由。popToTop()
回到最顶层的路由。
2.2 常用的属性
barTintColor string
导航条的背景颜色。initialRoute {
component: function, // 路由到对应的版块
title: string, // 标题
passProps: object, // 传递的参数
backButtonIcon: Image.propTypes.source, // 返回按钮
backButtonTitle: string, // 返回按钮标题
leftButtonIcon:Image.propTypes.source,
leftButtonTitle: string,
onLeftButtonPress: function,
rightButtonIcon: Image.propTypes.source,
rightButtonTitle: string,
onRightButtonPress: function,
wrapperStyle: [object Object]
}
NavigatorIOS使用"路由"对象来包含要渲染的子视图、它们的属性、以及导航条配置。"push"和任何其它的导航函数的参数都是这样的路由对象。
// 跳转到新闻详情页面
_pushToNewsDetail(docid){
this.props.navigator.push({
component:NewsDetail, // 跳转的页面
passProps:{docid} // 跳转时候携带的参数数据
})
}
}
itemWrapperStyle View#style
导航器中的组件的默认属性。一个常见的用途是设置所有页面的背景颜色。navigationBarHidden bool
一个布尔值，决定导航栏是否隐藏。shadowHidden bool
一个布尔值，决定是否要隐藏1像素的阴影。tintColor string
导航栏上按钮的颜色。titleTextColor string
导航器标题的文字颜色。translucent bool
一个布尔值，决定是否导航条是半透明的。-
运行效果：
TabBar.gif 实例代码：
export default class HJMain extends Component {
// 构造初始化状态
constructor(props) {
super(props);
this.state = {
selectedItem:'Home'
};
}
render() {
return (
<TabBarIOS
// 设置选中颜色
tintColor='orange'
>
{/*首页*/}
<TabBarIOS.Item
icon={{uri:'tabbar_home',scale:3}}
title="首页"
translucent={true} // 透明效果
// 被选中时的图片
selectedIcon={{uri:'tabbar_home_highlighted',scale:3}}
selected={this.state.selectedItem == 'Home'}
onPress={()=>{this.setState({selectedItem:'Home'})}}
>
<NavigatorIOS
//导航栏半透明效果 非半透明View会自动往下移
translucent={true}
style={{flex: 1}}
tintColor='orange'
initialRoute={{
component: Home, //设置根视图
title:'新闻',
leftButtonIcon:{uri:'navigationbar_friendattention_highlighted',scale:3},
rightButtonIcon:{uri:'navigationbar_pop_highlighted',scale:3},
}}
/>
</TabBarIOS.Item>
{/*信息*/}
<TabBarIOS.Item
icon={{uri:'tabbar_message_center' , scale:3} }
title='信息'
translucent={true}
// 被选中时的图片
selectedIcon={{uri:'tabbar_message_center_highlighted',scale:3}}
selected={this.state.selectedItem == 'Message'}
onPress={()=>{this.setState({selectedItem:'Message'})}}
>
<NavigatorIOS
//导航栏半透明效果 非半透明View会自动往下移
translucent={true}
style={{flex:1}}
titleColor="white"
initialRoute={{
component:Message,
title:'信息',
}}
/>
</TabBarIOS.Item>
{/*发现*/}
<TabBarIOS.Item
icon={{uri:'tabbar_discover',scale:3}}
title='发现'
translucent={true}
// 被选中时的图片
selectedIcon={{uri:'tabbar_discover_highlighted',scale:3}}
selected={this.state.selectedItem == 'Discover'}
onPress={()=>{this.setState({selectedItem:'Discover'})}}
>
<NavigatorIOS
//导航栏半透明效果 非半透明View会自动往下移
translucent={true}
style={{flex:1}}
initialRoute={{
component:Find,
title:'发现',
}}
/>
</TabBarIOS.Item>
{/*我的*/}
<TabBarIOS.Item
icon={{uri:'tabbar_profile',scale:3}}
title='我'
//半透明
translucent={true}
// 被选中时的图片
selectedIcon={{uri:'tabbar_profile_highlighted',scale:3}}
selected={this.state.selectedItem == 'Me'}
onPress={()=>this.setState({selectedItem:'Me'})}
>
<NavigatorIOS
//导航栏半透明效果 非半透明View会自动往下移
translucent={true}
style={{flex:1}}
// 导航栏颜色
barTintColor='rgba(255,255,255,0.3)'
initialRoute={{
component:Me,
title:'我',
}}
/>
</TabBarIOS.Item>
</TabBarIOS>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
module.exports = HJMain;
