One of the megatrends of hybrid development react native page jump

Reprint please indicate the source: Wang 's way of Daniel

Recently, there are a lot of things, there is not a long time to study, the article also stopped for more than a week, guilt, have time or continue to study, continue to write!

Or the first Amway: Https://github.com/ddwhan0123/Useful-Open-Source-Android (recently or keep the day even more, unless the busy take off live out to play otherwise is more, do not believe you see)

Not much nonsense, put down the running effect

Before landing

After successful login

Some code reference: Https://github.com/SpikeKing/WclNavigator

RN page jumps are referred to navigator for processing, we look at the document to understand this common component navigator

Navigator is essentially called the native task stack through a series of routes to do push jump and other logic, so the tune is the source of raw content.

He has a lot of practical callback functions, injected renderscene configurescene, etc.

Navigator normal operation requires the following steps

1. Initialize the route->initialroute
2. Configure the jump-turn picture->configurescene
3. Render the scene->renderscene

The code is the best note, and we look directly at the code side to explain, first index.android.js

To make the logic clearer, we put the previously logged-in code in Login.android.js.
Index page focus on "configuration"

import React,{Component} from ‘react‘;
Import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity
} from ‘react-native‘;
import Button from ‘react-native-button‘
import Login from ‘./pages/login.android‘;
export default class WjjPro extends Component {
* *
*Use dynamic page loading
*@ param route
*@ param navigator navigator
*@ returns {XML} page
* /
renderScene(route, navigator) {
return <route.component navigator={navigator}  {...route.passProps} />;
}
* *
*Configure scene animation
*@ param route
*@ param routestack routing stack
*@ returns {*} animation
* /
configureScene(route, routeStack) {
if (route.type == ‘Bottom‘) {
Return navigator. Sceneconfig. Floatfrombottom; / / pop up at the bottom
}
Return navigator. Sceneconfig. Pushfromwright; / / pop up on the right
}
Render () {
Return (
<Navigator
style={{flex:1}}
initialRoute={{component: Login}}
configureScene={this.configureScene}
renderScene={this.renderScene}/>
);
}
}
const styles = StyleSheet.create({
};
AppRegistry.registerComponent(‘WjjPro‘, () => WjjPro); 

Because our homepage essentially does not make the display but jumps directly to the login page, so we first configure navigator, initialize each function, then push to login This "component" that we define in the beginning, this part how to realize jump of can see knowledge transmission door, write very detailed, I don't need any more.

Ndex actually did a bunch of configuration and then passed to login, but he did a very important behavior, constructed the Navigator attribute, and then the subsequent page was passed

Login Page

The login page and the previous example of the code is no different, the main difference is to judge the form after the jump page, the code is as follows

Name is our parameter that we want to jump to the next page

It can pass the past value in This.props.name get our login page

Type is the animation effect of our jump, corresponding to the Configurescene method of finding Navigator

The file header also declares our next component to be redirected.

 
 
import Main from ‘./main.android‘;
    _jump(name, type = ‘Normal‘) {
        this.props.navigator.push({
          component: Main,
          passProps: {
            name: name
          },
          type: type
        })
      }

Push is similar to our usual startactivity behavior, API introduction can see http://facebook.github.io/react-native/docs/navigator.html

The landing was successful, then we jumped to our homepage.

 
import React, {Component,Navigator} from ‘react‘;
import {AppRegistry, View, StyleSheet, Text,} from ‘react-native‘;

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: ‘‘,
        }
    }

    componentDidMount() {
        this.setState({name: this.props.name});
    }
    render() {
        return (
            <View>
                <Text>获得的参数: value = {this.state.name}</Text>
            </View>
        );
    }
}

AppRegistry.registerComponent(‘Main‘, () => Main);

In the Componentdidmount method of the homepage, we assign the parameter to the Name field of the main page and then render it on the text.

Summarize:

This is a powerful control that can be used for page jumps.

If you want to use only
1. Construction Navigator
2. Configuring Navigator with Business logic
3. Call Push,jump and other methods to jump

Source Address: Https://github.com/ddwhan0123/ReactNativeDemo

One of the megatrends of hybrid development react native page jump