[深入剖析React Native]React Native组件之Navigator
1.简介导航组件Navigator可以让app在不同页面进行切换。为达到这样的功能,Navigator提供了路由对象功能进行区分每个页面。 2.动画手势属性PushFromRight 3.Navigator方法在使用导航器的时候,如果你已经获取了导航器对象的引用,我们可以进行调用以下一些方法来实现页面导航功能:getCurrentRoutes() 该进行返回存在的路由列表信息 4.Navigator属性风格configureScene -- function 方法, 该为可选的方法进行配置页面切换动画和手势。该会通过路由和路由栈两个参数调用,进行返回一个页面参数配置对象:(route,routeStack) => Navigator.SceneConfigs.FloatFromRight (route,navigator) =><MySceneComponent title={route.title} navigator={navigator} />
sceneStyle -- 样式风格,该继承了View视图的所有样式风格。该设置用于每个页面容器的风格 5.实例'use strict';
import React,{ Component } from 'react';
import {
AppRegistry,StyleSheet,Text,View,Navigator,TouchableHighlight,} from 'react-native';
class NavButton extends Component {
render() {
return (
<TouchableHighlight
style={styles.button}
underlayColor="#B5B5B5"
onPress={this.props.onPress}>
<Text style={styles.buttonText}>{this.props.text}</Text>
</TouchableHighlight>
);
}
}
class HomeScene extends Component {
render() {
return(
<View style={styles.container}>
<NavButton
onPress={() => {
this.props.navigator.push({
component: ConfigsScene,name: '手势属性',});
}}
text='手势属性'
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: MethodsScene,name: '方法',});
}}
text='方法'
/>
</View>
);
}
}
class ConfigsScene extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.messageText}>{this.props.message}</Text>
<NavButton
onPress={() => {
this.props.navigator.pop();
}}
text="返回上一页"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,sceneConfig: Navigator.SceneConfigs.PushFromRight,});
}}
text="PushFromRight default"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,sceneConfig: Navigator.SceneConfigs.FloatFromRight,});
}}
text="FloatFromRight"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,sceneConfig: Navigator.SceneConfigs.FloatFromLeft,});
}}
text="FloatFromLeft"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,sceneConfig: Navigator.SceneConfigs.FloatFromBottom,});
}}
text="FloatFromBottom"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,sceneConfig: Navigator.SceneConfigs.FloatFromBottomAndroid,});
}}
text="FloatFromBottomAndroid"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,sceneConfig: Navigator.SceneConfigs.FadeAndroid,});
}}
text="FadeAndroid"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,sceneConfig: Navigator.SceneConfigs.HorizontalSwipeJump,});
}}
text="HorizontalSwipeJump"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,sceneConfig: Navigator.SceneConfigs.HorizontalSwipeJumpFromRight,});
}}
text="HorizontalSwipeJumpFromRight"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,sceneConfig: Navigator.SceneConfigs.VerticalUpSwipeJump,});
}}
text="VerticalUpSwipeJump"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
component: EndScene,sceneConfig: Navigator.SceneConfigs.VerticalDownSwipeJump,});
}}
text="VerticalDownSwipeJump"
/>
</View>
);
}
}
class MethodsScene extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.messageText}>Current Routes length: {this.props.navigator.getCurrentRoutes().length}</Text>
<NavButton
onPress={() => {
this.props.navigator.jumpBack();
}}
text='jumpBack'
/>
<NavButton
onPress={() => {
}}
text='jumpForward'
/>
<NavButton
onPress={() => {
}}
text='jumpTo'
/>
</View>
);
}
}
class EndScene extends Component {
render() {
return (
<View style={styles.container}>
<NavButton
onPress={() => {
this.props.navigator.pop();
}}
text="返回上一页"
/>
<NavButton
onPress={() => {
this.props.navigator.popToTop();
}}
text="退到栈中第一个页面"
/>
</View>
);
}
}
export default class NavigatorMazouri extends Component {
render() {
return (
<Navigator
style={styles.container}
initialRoute={{
component: HomeScene,name: 'home'
}}
renderScene={(route,navigator) => {
let Component = route.component;
if(route.component) {
return <Component {...route.params} navigator={navigator} />
}
}}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.PushFromRight;
}}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,justifyContent: 'center',backgroundColor: '#F5FCFF',},messageText: {
fontSize: 17,fontWeight: '500',padding: 15,marginTop: 50,marginLeft: 15,button: {
backgroundColor: 'white',borderBottomWidth: StyleSheet.hairlineWidth,borderBottomColor: '#CDCDCD',});
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- oracle 创建,删除存储过程,参数传递,创建,删除存储函数,存储
- Add comments to a regular expression (为正则表达式加注释
- JSONArray和JSONObject对字符串转换的问题
- cocos2d-js 3.0 beta + cocos code ide + pomelo手游框架搭
- 用于sqlite3的Windows命令提示符shell
- objective-c – “dwarfdump二进制文件必须存在且必须可执行
- Swift多defer的执行顺序及特殊情况
- Flex中数据绑定Bind的一些方法
- 使用ajax和history.pushState无刷新改变页面URL
- c# – 部署后Log4Net不记录