ChargEco/Strides-SPAPP/app/pages/payment/CreditCard.js

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import * as Progress from 'react-native-progress';
import WebView from 'react-native-webview';
import routeUtil from '../../utils/routeUtil';
import { PageList } from '../Router';

export default class CreditCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      url: 'http://161.117.183.142/juiceplus/cardCancelPage.html',
      url2: 'http://baidu.com',
      progress: 0
    };
  }

  componentDidMount() {
    if (this.props.route.params.url) {
      this.setState({
        url: this.props.route.params.url
      });
    }
  }

  onPostMessage(data) {
    //toTopupPage()
    routeUtil.bridge2Page(PageList.topupNew);
    /*if (data) {
      try {
        const msg = JSON.parse(data);
        if (msg.msg) {
          Dialog.showResultDialog(msg.msg, $t('nav.ok'), back => {
            startPage(PageList.topup);
          });
        }
      } catch (error) {
        
      }
      console.log('WebviewMessage', data)
    }*/
  }

  render() {
    return (
      <View style={styles.container}>
        <Progress.Bar
          style={styles.progress}
          width={$vw(100)}
          height={2}
          color={colorPrimaryDark}
          borderWidth={0}
          borderRadius={0}
          progress={this.state.progress}/>
        <WebView
          style={ui.flex1}
          source={{ uri: this.state.url}}
          mixedContentMode={'always'}
          applicationNameForUserAgent={'juiceplus/1.0'}
          onLoadProgress={({nativeEvent}) => this.setState({ progress: nativeEvent.progress }) }
          onLoadEnd={(e) => {
            //console.log('webview-end', e)
            this.setState({ progress: 0 }) 
          }}
          onMessage={e => this.onPostMessage(e.nativeEvent.data)}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  progress: {
    top: 0,
    left: 0,
    position: 'absolute',
  }
})