私が取り組んでいる反応するネイティブアプリケーションのために、Viewコンポーネント内でWebViewコンポーネントを使用しようとしています。 ViewにWebViewを埋め込むと、WebViewに表示しているコンテンツが表示されません。これは、react nativeで予期される動作ですか?
WebViewの幅と高さを指定する必要があります。次のようにしてください:
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{flex: 1}} // OR style={{height: 100, width: 100}}
/>
);}
Viewコンポーネント内にネストする場合、viewとwebview flexの両方を1に設定する必要があります。
例えば。 -
<View style={{flex:1}}>
<WebView
source={{ uri: url }}
style={{flex:1}}
/>
</View>
次のコードを使用してください:
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
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}}
/>
}
このようなものを使用できます
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>
);
}