ReactNative page Jump instance code, reactnative jump

ReactNative page Jump instance code, reactnative jump

As follows:

Go to the working directory and run

React-native init NavigatorProject

Create a project 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 (<NavigatorinitialRoute = {name: defaultName, component: defaultComponent }}// initialize the Navigator and specify the default page configureScene = {(route) =>{ return Navigator. sceneConfigs. floatFromRight; // configure the scene animation. The animation is displayed when the page jumps.} renderScene = {(route, navigator) =>{ let Component = route. component; return <Component {... route. params} navigator = {navigator}/> // Rendering scenario}/>) ;}// the first page class FirstPageComponent extends Component {clickJump () {const {navigator} = this. props; if (navigator) {navigator. push ({// navigator. push incoming name and the component Page name you want to jump to: "SecondPageComponent", component: SecondPageComponent}) ;}} render () {return (<View style = {styles. container }> <Text> I am the first page </Text> <TouchableHighlightunderlayColor = "rgb (180,135,250)" activeOpacity = {0.5} style = {borderRadius: 8, padding: 8, marginTop: 8, backgroundColor: "# F30"} onPress = {this. clickJump. bind (this) }>< Text> click to enter the second page </Text> </TouchableHighlight> </View> );}} // second page class SecondPageComponent extends Component {clickJump () {const {navigator} = this. props; if (navigator) {navigator. pop (); // navigator. pop uses the current page to exit the stack and displays the previous page in the stack .}} render () {return (<View style = {styles. container }> <Text> I am the second page </Text> <TouchableHighlightunderlayColor = "rgb (180,135,250)" activeOpacity = {0.5} style = {borderRadius: 8, padding: 8, marginTop: 5, backgroundColor: "# F30"} onPress = {this. clickJump. bind (this) }>< Text> click to return to the first page </Text> </TouchableHighlight> </View>) ;}} const styles = StyleSheet. create ({container: {flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '# ffff',},}); AppRegistry. registerComponent ('navigatorproject', () => navigatorProject );

The above is the ReactNative page Jump instance Code introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!