Могу ли я использовать 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