RN transfer problems encountered H5

I am using this plugin turn: react-native-web, first in the allocation webpack reference to a project scaffolding generated (generated by this rn project there webpack configuration, the scaffolding is react-native-web-cli), in when configuring webpack I encountered a lot of problems, but also learned a lot of things, here are the main problems encountered and solutions h5 turn.

1 babel Configuration: Because it is a native of the project, in node_modules bag grammatical number ts of being given Babel resolved, resulting in time local their projects compiled not by error, but later found a new babel have integrated ts-loader, in the allocation of time need to add plug-ins (plug-ins need to be installed):

plugins: [
                 ' @ babel / plugin-Proposal-default-from-export ' ,   // Compile Times can not fault export of 
                ' @ babel / plugin-the Transform-Flow-Strip-types '   // does not support keyword compile-time type error 
]

2 routing problem: Start react-navagation use, this plug more online information, with very broad, but after the turn H5 found from one page to jump to the next page when a page just before the set opacity to 0, height and no edge, leading to the emergence of a blank page and the next page top down, scroll down the page to see the need to monitor routes into and out to give him a set style:

  componentDidMount() {
             this.props.navigation.addListener('willBlur', () => {
                 this.setState({container: 'containerOut'})
             });
             this.props.navigation.addListener('willFocus', () => {
                 this.setState({container: 'containerIn'})
             });
    }

Since each page has a padding-top (otherwise be obscured by the top navigation bar), so that each entering a new page will be superimposed padding-top, so set the style for each page is different, then consider try another plug, and tried many (react-native-router-flux; react-router-native; react-native-navigation; react-native-navigator-router), and finally with the react-native-router-flux, the more people who use online information will be more (mostly official API documentation translated ...) is said to see the package in the react-navagation basis, mainly to solve some of the problems of the react-navagation and ease of use is good, considering he may solve the problem on top of, then download a demo and found h5 turn that question really does not exist, it began to turn in our project. Beginning with version 3.37.0, after transfection h5 found navbar can not be achieved with the configuration, you need to write your own components, jump page can not be found Actions.push () method after writing component, but the Internet can say this, but later found 3.37 .0 version yet of this method, this method has changed after 4.0.0, but the black and white page, turn found no h5 outermost div height, in the Router tag configuration is not so that, at last Router labels outside cover with a layer of View to come out of the height of the page, below is configured routing code:

        <View style = {styles.wrap}> // here to the height of height of the apparatus is obtained 
          <Router sceneStyle styles.sceneStyle = {}> 
            <Scene Key = " the root " NavBar the NavBar = {}> // each page are NavBar, unified configuration where 
              <Scene Key = " C " 
                component = {C} reference component C 
                title = " . 1 " // navigation title set 
                righttitle = " . 1 " // navigation right portion of the title 
                rightJumpTo = " A " / / right part of the navigation route name to jump 
              /> 
              <Scene
                key="a"
                component={a}
                title="1"
                rightTitle="1"
                rightJumpTo="w"
              />
              <Scene
                key="w"
                component={w}
                title="1"
              />
            </Scene>
          </Router>
        </View>

Below is NavBar components:

import React, {Component} from 'react';
import {
    TouchableOpacity,
    View,
    Image,
    Alert,
    NativeModules,
    StyleSheet,
    Text
} from 'react-native';
import { Actions } from 'react-native-router-flux';

export default class NavBackButton extends Component {
    constructor(props){
        super(props)
    }
    render() {
        let {title, rightTitle='', rightJumpTo=''} = this.props;

        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={() => {Actions.pop()}}>
                    <Image source={require('../images/rn_icon_nav_return.png')} style={styles.back}/>
                </TouchableOpacity>
                <Text style={styles.txt}>{title}</Text>
                <TouchableOpacity onPress={() => {Actions.push(rightJumpTo)}}>
                    <Text style={styles.txt}>{rightTitle}</Text>
                </TouchableOpacity>
            </View>
        );
    }
}
            
const styles = StyleSheet.create({
    container: {
        height: 64,
        width: '100%',
        backgroundColor: '#5aa5ff',
        top: 0,
        position: 'absolute',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 10
    },
    txt: {
        color: '#fff',
        fontSize: 18
    },
    back: {
        width: 25,
        height: 25
    }
});

We have time to git address stickers. . . . . .