rn-project/src/pages/web.js

#### 项目介绍 类似一个脚手架的工具 此项目致力于构建一套基础，简单，可维护的 适配我司的react-native项目。可在此基础上搭建项目，封装了基础架构，基础组件，以及各种交互等；可快速进行项目搭建，开发。 # 涉及主要技术 - 1. 项目主要架构 * react native * react-navigation * redux

import React, { Component } from 'react';
import { StyleSheet, WebView, View, Text } from 'react-native';
import { SafeAreaView } from 'react-navigation';
import PropTypes from 'prop-types';
import ViewUtil from '../utils/View';
import BaseStyle from '../constants/Style';

export default class Web extends Component {
  static propTypes = {
    navigation: PropTypes.object,
  };
  constructor(props) {
    super(props);
    this.state = {
      error: false,
    };
  }
  componentDidMount() {}
  componentWillUnmount() {}

  render() {
    const { navigation } = this.props;
    const uri = navigation.getParam('uri');

    return (
      <SafeAreaView style={BaseStyle.flex}>
        {!this.state.error ? (
          <WebView
            source={{ uri: uri }}
            startInLoadingState={true}
            // javaScriptEnabled={true}
            // mixedContentMode={'always'}
            // dataDetectorTypes={'all'}
            ref={webView => (this.webView = webView)}
            scalesPageToFit={true}
            scrollEnabled={true}
            onError={() => this.setState({ error: true })}
            style={{ width: ViewUtil.size.width, height: ViewUtil.size.height }}
          />
        ) : (
          <View style={styles.view}>
            <Text>页面不见了...</Text>
          </View>
        )}
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  view: {
    ...BaseStyle.flex,
    ...BaseStyle.alignItemsCenter,
    ...BaseStyle.justifyContentCenter,
  },
});