Question

我想在我的React Native App中使用外部网页。我的应用程序上有按钮，想在我的应用程序中打开外部网页onPress按钮而不是浏览器。我试过WEBVIEW但没有帮助我。现在我试过这个：

 <HTMLView
        value={this.props.html}
        onLinkPress={(url) => alert('clicked link: ', url)}
      />

我该怎么做？

Answer 1

我试过这个，它为我工作。使用此命令安装react-native-custom-tabs

npm install react-native-custom-tabs --save

并使用

链接自定义标签包

react-native link react-native-custom-tabs

而不是叫它

import {CustomTabs,ANIMATIONS_SLIDE,ANIMATIONS_FADE} from 'react-native-custom-tabs';

openCustomizedCustomTabs() {
    this.openGoogle({
      toolbarColor: '#607D8B',
      enableUrlBarHiding: true,
      showPageTitle: true,
      enableDefaultShare: true,
      animations: ANIMATIONS_SLIDE
    });
}
errorOccur() {
    this.openGoogle({
      //toolbarColor: '607D8B', // <--- Invalid toolbar color.
      enableUrlBarHiding: '#607D8B',  // <-- Type Error.
    })
  }

  openGoogle(option) {
    CustomTabs.openURL('https://www.google.com', option).then((launched: boolean) => {
      console.log(`Launched custom tabs: ${launched}`);
    }).catch(err => {
      console.error(err)
    });
  }

render(){
return <Button marginTop={10} onPress={() => this.openCustomizedCustomTabs()}>
                      Custom Tab
                        </Button> 
}

并运行app。

Answer 2

function renderNode(node, index, siblings, parent, defaultRenderer) {
  if (node.name == 'iframe') {
    const a = node.attribs;
    const iframeHtml = `<iframe src="${a.src}"></iframe>`;
    return (
      <View key={index} style={{width: Number(a.width), height: Number(a.height)}}>
        <WebView source={{html: iframeHtml}} />
      </View>
    );
  }
}



class Page extends React.Component {
  render() {
   const htmlContent = `
     <div>
       <iframe src={this.props.utl} width="360" height="300" />
     </div>

    return (
      <HTMLView value={htmlContent} renderNode={renderNode} />
    );
  }
}

然后使用它：

<Page url="the url here..." />

Answer 3

React Native WebView 组件已添加到新版本的文档中。 https://facebook.github.io/react-native/docs/webview.html

import React, { Component } from 'react';
import { WebView } from 'react-native';

class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://github.com/facebook/react-native'}}
        style={{marginTop: 20}}
      />
    );
  }
}

如何在React Native View中使用外部网页

3 个答案: