Я пытаюсь использовать компонент WebView Component внутри компонента View, для реагирования на собственное приложение, над которым я работаю. Когда я встраиваю WebView внутри представления, я не вижу контент, который я показываю в WebView. Является ли это ожидаемым поведением с реакцией native?
Могу ли я использовать WebView внутри представления (реагировать на родной язык)?
Ответ 1
Вы должны указать ширину и высоту вашего веб-представления. Сделайте это следующим образом:
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{flex: 1}} // OR style={{height: 100, width: 100}}
/>
);}
Ответ 2
Когда он вложен внутри компонента View, вам необходимо установить для вида view и webview flex значение 1.
например. -
<View style={{flex:1}}>
<WebView
source={{ uri: url }}
style={{flex:1}}
/>
</View>
Ответ 3
Можно использовать что-то вроде этого
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>
);
}
Ответ 4
Попробуйте это, чтобы открыть файл PDF. Li'l из коробки, но я уверен, что это кому-то поможет :)
{
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}}
/>
}
Ответ 5
Пожалуйста, используйте следующий код:
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
}
});
этот код работает абсолютно нормально для меня,
Во всех вышеперечисленных решениях я заметил, что все предлагают добавить flex: 1 к вашему стилю webView.
Да, это правильно, но если вы хотите вложить WebView в View, вам нужно точно указать стили вашего родительского представления.
Итак, я установил justifyContent: 'flex-start', чтобы по вертикали WebView начинался сверху моего экрана, а alignItems: 'stretch', чтобы WebView брал все доступное в горизонтальном направлении.
Так как мы используем justifyContent для задания выравнивания первичной оси, а alignItems для задания выравнивания вторичной оси, а по умолчанию flexDirection - это столбец.
Чтобы получить больше информации о том, как установить response-native-webview, перейдите по следующей ссылке: https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md