web-dev-qa-db-ja.com

ビュー内でWebViewを使用できますか（React Native）？

私が取り組んでいる反応するネイティブアプリケーションのために、Viewコンポーネント内でWebViewコンポーネントを使用しようとしています。 ViewにWebViewを埋め込むと、WebViewに表示しているコンテンツが表示されません。これは、react nativeで予期される動作ですか？

webviewreact-native
19
user4122421

WebViewの幅と高さを指定する必要があります。次のようにしてください：

render() {
return (
  <WebView
    source={{uri: 'https://github.com/facebook/react-native'}}
    style={{flex: 1}} // OR style={{height: 100, width: 100}}
  />
);}
24
abeikverdi

Viewコンポーネント内にネストする場合、viewとwebview flexの両方を1に設定する必要があります。

例えば。 -

<View style={{flex:1}}>
    <WebView
      source={{ uri: url }}
      style={{flex:1}}
      />
</View>
19
Shivam Aditya

次のコードを使用してください：

import React from 'react';
import {View, ImageBackground, StyleSheet} from 'react-native';
import { WebView } from 'react-native-webview';

export default class WebViewScreen extends React.Component {
    render(){
        return(
            <View style={styles.container}>
                <WebView 
                    source= {{uri: 'https://www.google.com'}}
                    style= {styles.loginWebView}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'stretch',
    },
    loginWebView: {
        flex: 1,
        marginTop: 30,
        marginBottom: 20
    }
});

このコードは私には絶対にうまく機能しています。

上記のすべてのソリューションで、誰もがwebViewスタイルにflex：1を追加することを提案していることに気付きました。

はい、正しいですが、View内でWebViewをネストする場合は、親ビューのスタイルを正確に指定する必要があります。

そこで、justifyContent： 'flex-start'を設定して、WebViewが画面の上部から垂直に開始するようにし、 alignItems： 'stretch'。これにより、WebViewは利用可能なすべてを水平方向に取得します。

justifyContentを使用して主軸のアライメントを指定し、alignItemsを使用して副軸のアライメントを指定します。デフォルトのflexDirectionは列です。

React-native-webviewのインストール方法の詳細については、次のリンクを参照してください： https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting- Started.md

2
Akshay Jadhav

PDFファイルを開くには、これを試してください。箱から出してすぐにでも私はそれが誰かを助けると確信しています:)

{
    Platform.OS === "Android" ? 
        <WebView  
            source={{uri:'http://docs.google.com/gview?embedded=true&url=https://your PDF Link'}}
            style={{flex: 1}}
        />
        :
        <WebView
            source={{uri:'https:your PDF Link'}}
            style={{flex: 1}}
        />
}
1
Rishav Kumar

このようなものを使用できます

render() {
let {url} = this.props.webDetail;

return (
  <View style={styles.container}>
    {this.renderSpinner()}
    <WebView onLoad={this.onWebLoad.bind(this)}
      source={{ uri: url }}
      scalesPageToFit={true}
      />
  </View>
 );
}
1
Mohit Verma