React Nativeビューで外部Webページを使用する方法

Question

React Native Appで外部Webページを使用します。私は自分のアプリにボタンを持っていて、ブラウザ上ではなく私のアプリで外部ウェブページのonPressボタンを開きたいと思う。 私はWEBVIEWを試しましたが、私を助けませんでした。 は今、私はこれを試してみました：

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

私はこれをどのように行うことができますか？

Answer 1

私はこれを試してみましたし、そのは私のために働い。それ

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> 
} 

を呼び出し、アプリケーションを実行するよりも、

react-native link react-native-custom-tabs 

を使用して、このコマンド

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

とリンクカスタムタブのパッケージよりも

を使用して インストール反応し、ネイティブカスタムタブ。

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

リアクションネイティブ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}} 
 
     /> 
 
    ); 
 
    } 
 
}