React Native,Webview iOS无法渲染

时间:2017-04-03 06:51:29

标签: webview react-native

我正在使用React-Native构建应用程序。

我正在尝试使用Webview呈现网址,甚至一些基本的HTML或像m.facebook.com这样的网站也不会在iOS中呈现。像其他Webview一样试过不同的解决方案,但没有给出结果。

在Android中我没有任何问题,页面将呈现正常。我错过了一些关键信息。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actions } from 'react-native-navigation-redux-helpers';
import { Container, Header, Title, Content, Button, Icon, Footer } from 'native-base';
import { Platform, WebView } from 'react-native';

import FooterTabs from '../../components/footerTabs/FooterTabs';

import { openDrawer } from '../../actions/drawer';
import { setWebsiteUrl } from '../../actions/website';
import styles from './styles';

const {
 pushRoute,
 popRoute,
} = actions;

class Website extends Component {
 constructor(props, context) {
  super(props, context);

  this.state = {};

  this.openFrame = this.openFrame.bind(this);
 }

 popRoute() {
  this.props.popRoute(this.props.navigation.key);
 }

 pushRoute(route, index) {
  this.props.pushRoute({ key: route, index: 1 }, this.props.navigation.key);
 }

 openFrame(url, name) {
  this.props.setWebsiteUrl(url, name);
  this.pushRoute('website', 2);
 }

 render() {
  const { props } = this;
  const { website, totalQuantity } = props;
  const { frameUrl, frameName } = website;

return (
  <Container style={styles.container} theme={deenTheme}>
    <Header toolbarDefaultBg="#FFF" toolbarTextColor="FBFAFA">
      <Button transparent onPress={this.props.openDrawer}>
        <Icon name="ios-menu" />
      </Button>
      <Title style={styles.headerText}>{frameName}</Title>
      <Button transparent onPress={() => this.openFrame('/cart', 'Winkelwagen')}>
        <Icon style={{ fontSize: 25 }} name="md-basket" />
      </Button>
      <Button transparent>
        <Icon style={{ fontSize: 25 }} name="md-search" />
      </Button>
    </Header>
    <Content>
      <WebView
        source={{ uri: frameUrl }}
        startInLoadingState
        javaScriptEnabledAndroid
        javaScriptEnabled
        domStorageEnabled
        scrollEnabled
        style={{ flex: 1, width: 320 }}
      />
    </Content>
    <Footer theme={deenTheme}>
      <FooterTabs />
    </Footer>
  </Container>
);
}
}

Website.propTypes = {
 totalQuantity: React.PropTypes.number,
 openDrawer: React.PropTypes.func,
 setWebsiteUrl: React.PropTypes.func,
 popRoute: React.PropTypes.func,
 pushRoute: React.PropTypes.func,
 navigation: React.PropTypes.shape({
  key: React.PropTypes.string,
 }),
};

function bindAction(dispatch) {
 return {
  openDrawer: () => dispatch(openDrawer()),
  popRoute: key => dispatch(popRoute(key)),
  pushRoute: (route, key) => dispatch(pushRoute(route, key)),
  setWebsiteUrl: (url, name) => dispatch(setWebsiteUrl(url, name)),
 };
}

const mapStateToProps = state => ({
 navigation: state.cardNavigation,
 website: state.website,
 totalQuantity: state.cart.totalQuantity,
});


export default connect(mapStateToProps, bindAction)(Website);

更新<!/强>

在iOS中我需要配置样式宽度&amp;高度否则它将无法正常工作。

0 个答案:

没有答案