首页 > 代码库 > ReactNative——页面跳转
ReactNative——页面跳转
效果图：
进入工作目录，运行
react-native init NavigatorProject
创建项目NavigatorProject
import React, { Component } from ‘react‘;import { AppRegistry, StyleSheet, Text, View, TouchableHighlight, Image, Navigator} from ‘react-native‘;
class navigatorProject extends Component{ render(){ let defaultName = ‘firstPageName‘; let defaultComponent = FirstPageComponent;
return( <Navigator initialRoute = {{name: defaultName, component: defaultComponent}} //初始化导航器Navigator,指定默认的页面 configureScene = { (route) => { return Navigator.SceneConfigs.FloatFromRight; //配置场景动画，页面之间跳转时候的动画 } } renderScene = { (route, navigator) =>{ let Component = route.component; return <Component{...route.params} navigator = {navigator} /> //渲染场景 } } /> ); } }
//第一个页面class FirstPageComponent extends Component{ clickJump(){ const{navigator} = this.props; if(navigator){ navigator.push({ //navigator.push 传入name和你想要跳的组件页面 name: "SecondPageComponent", component: SecondPageComponent }); } } render(){ return( <View style = {styles.container}> <Text>我是第一个页面</Text> <TouchableHighlight underlayColor = "rgb(180,135,250)" activeOpacity = {0.5} style = {{ borderRadius: 8, padding: 8, marginTop: 8, backgroundColor: "#F30" }} onPress = {this.clickJump.bind(this)}> <Text>点击进入第二个页面</Text> </TouchableHighlight> </View> ); }}
//第二个页面class SecondPageComponent extends Component{ clickJump(){ const{navigator} = this.props; if(navigator){ navigator.pop(); //navigator.pop 使用当前页面出栈, 显示上一个栈内页面. } } render(){ return( <View style = {styles.container}> <Text>我是第二个页面</Text> <TouchableHighlight underlayColor = "rgb(180, 135, 250)" activeOpacity = {0.5} style = {{ borderRadius: 8, padding: 8, marginTop: 5, backgroundColor: "#F30" }} onPress = {this.clickJump.bind(this)}> <Text>点击返回第一个页面</Text> </TouchableHighlight> </View> ); }}
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: ‘center‘, alignItems: ‘center‘, backgroundColor: ‘#FFFFFF‘, },});AppRegistry.registerComponent(‘navigatorProject‘, () => navigatorProject);
延伸：传参。
以上面的代码为基础。
一：
效果图：
//第一个界面class FirstPageComponent extends Component{ constructor(props){ super(props); //参数来源 this.state = { author: ‘华帅‘ }; } clickJump(){ const{navigator} = this.props; if(navigator){ navigator.push({ name: "SecondPageComponent", component: SecondPageComponent, //传递参数，入栈 params: { author: this.state.author, } }); } } render(){ return( <View style = {styles.container}> <Text>我是第一个页面</Text> <TouchableHighlight underlayColor = "rgb(180, 135, 250)" activeOpacity = {0.5} style = {{ borderRadius: 8, padding: 8, marginTop: 8, backgroundColor: "#F30" }} onPress = {this.clickJump.bind(this)} > <Text>点击进入第二个页面</Text> </TouchableHighlight> </View> ); }}
//第二个页面class SecondPageComponent extends Component{ constructor(props) { super(props); this.state = {}; } //接收传递过来的参数 componentDidMount() { this.setState({ author: this.props.author, }); } clickJump(){ const{navigator} = this.props; if(navigator){ navigator.pop(); } } render(){ return( <View style = {styles.container}> <Text>我是第二个页面</Text> <TouchableHighlight underlayColor = "rgb(180, 135, 250)" activeOpacity = {0.5} style = {{ borderRadius: 8, padding: 8, marginTop: 5, backgroundColor: "#F30" }} onPress = {this.clickJump.bind(this)}> <Text>点击返回第一个页面</Text> </TouchableHighlight> <Text>作者是：{this.state.author}</Text> </View> ); }}
二：
效果图：
//第一个页面class FirstPageComponent extends Component{ constructor(props){ super(props); //参数来源 this.state = { author: "华帅", id: 1, user: null, }; } clickJump(){ const{navigator} = this.props; const self = this; if(navigator){ navigator.push({ name: "SecondPageComponent", component: SecondPageComponent, //传递参数，入栈 params:{ author: this.state.author, id: this.state.id, //从第二页获取user getUser: function(user){ self.setState({ user: user }); } } }); }
} render(){ if(this.state.user){ return( <View> <Text style = {styles.container}>用户信息：{JSON.stringify(this.state.user)}</Text> </View> ); }else{ return( <View style = {styles.container}> <Text>我是第一个页面</Text> <TouchableHighlight underlayColor = "rgb(180, 135, 250)" activeOpacity = {0.5} style = {{ borderRadius: 8, padding: 8, marginTop: 8, backgroundColor: "#F30" }} onPress = {this.clickJump.bind(this)}> <Text>点击进入第二个页面</Text> </TouchableHighlight> </View> ); } }}
const USER_MODELS = { 1: {name: ‘华帅‘, age: 44}, 2: {name: ‘小明‘, age: 12}};
//第二个页面class SecondPageComponent extends Component{ constructor(props){ super(props); this.state = { id:null }; } //接收传递过来的参数 componentDidMount(){ this.setState({ author: this.props.author, id: this.props.id, }); } clickJump(){ const{navigator} = this.props; if(this.props.getUser){ let user = USER_MODELS[this.props.id]; this.props.getUser(user); } if(navigator){ navigator.pop(); } } render(){ return( <View style = {styles.container}> <Text>我是第二个页面</Text> <Text>ID: {this.state.id}</Text> <TouchableHighlight underlayColor = "rgb(180, 135, 250)" activeOpacity = {0.5} style = {{ borderRadius: 8, padding: 8, marginTop: 5, backgroundColor: "#F30" }} onPress = {this.clickJump.bind(this)}> <Text>点击返回第一个页面</Text> </TouchableHighlight> <Text>作者是：{this.state.author}</Text> </View> ); }}
ReactNative——页面跳转
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。