React Native Webview не загружает URL-адрес (не работает родной веб-просмотр)

Я пытаюсь внедрить компонент native webview в моем приложении, но веб-представление не загружает URL-адрес, просто отображая белую страницу.

var React = require('react-native');
var{
 View,
 Text,
 StyleSheet,
 WebView
} = React;


module.exports = React.createClass({
 render: function(){
   return(
     <View style={styles.container}>
      <WebView source={{uri: 'https://m.facebook.com'}} style= {styles.webView}/>
     </View>
   );
 }
});

var styles = StyleSheet.create({
   container: {
     flex:1,
     backgroundColor:  '#ff00ff'
   },webView :{
     height: 320,
     width : 200
   }
});

Ниже приведен снимок экрана. image

ОТВЕТЫ

Ответ 1

Ниже приведен фрагмент кода, который работал у меня.

render: function(){
   return(
     <View style={styles.container}>
      <WebView url={'https://m.facebook.com'} style= {styles.webView}/>
     </View>
   );
 }

Ответ 2

У меня была эта проблема. WebView будет отображать, когда он был единственным возвращаемым компонентом, но не вложенным в другой компонент View.

По причинам я не совсем уверен, что проблема была решена путем установки свойства width в компоненте WebView.

class App extends React.Component {
  render() {

    return (
      <View style={styles.container}>
        <WebView
          source={{uri: 'https://www.youtube.com/embed/MhkGQAoc7bc'}}
          style={styles.video}
        />
        <WebView
          source={{uri: 'https://www.youtube.com/embed/PGUMRVowdv8'}}
          style={styles.video}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between',

  },
  video: {
    marginTop: 20,
    maxHeight: 200,
    width: 320,
    flex: 1
  }
});

Ответ 3

У меня такая же проблема. Я заметил, что WebView не работает, если он вложен. Если компонент возвращает только WebView, тогда все в порядке.

Ответ 4

WebView хорошо работает на Android. Однако для некоторых веб-страниц необходимо включить хранилище javascript и dom.

<WebView style={styles.webView}
    source={{uri: 'https://google.com/'}}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    startInLoadingState={true}
    >
</WebView>

Ответ 5

Если вы хотите, чтобы компонент отображал всю страницу, вам нужно обернуть его с помощью представления, имеющего flex: 1. Следующий код работает для меня:

<View style={{flex:1, alignItems: 'flex-end'}}>
  <WebView
   source={{uri: this.state.webContentLink}}
   startInLoadingState={true}
   scalesPageToFit={true} />
</View>

Ответ 6

<View>
    <WebView
        source={{uri: this.props.link}}
        style={styles.webview}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        startInLoadingState={true}
    />
</View>

и стиль следующим образом:

const React = require('react-native');

const { Dimensions } = React;

const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;

export default {
  webview: {
      width: deviceWidth,
      height: deviceHeight
  }
};

Все это, чтобы иметь дело с плохим размером webview, поэтому просто установите определенную высоту и определенную ширину (deviceHeight и deviceWidth в качестве примера выше).

Ответ 7

Используя ответы других пользователей, я смог настроить свою реакцию с веб-просмотром, работающим как внутри представления, так и вне представления. Моя проблема сводилась к двум вещам. Находясь на эмуляторе Android и за прокси, мне просто нужно было зайти в свой браузер (chrome) в эмуляторе Android и войти в корпоративный прокси. Во-вторых, некоторые сайты работают, а другие не будут работать. Независимо от того, был ли веб-просмотр вложенным или нет в теге View, некоторые сайты, такие как cnn.com, slack.com и т.д., Будут работать нормально, но независимо от того, какие настройки я пробовал для google.com, они не будут работать (даже если прокси-сервер будет работать). обязательно разрешите google.com) Наконец, когда я перестраивал свое приложение и отправлял в эмулятор новое приложение, иногда загрузка какого-либо сайта занимала слишком много времени. Но как только сайт был загружен, ссылки становятся быстрыми и отзывчивыми. Так что если вы сначала не видите что-то после сборки, также будьте терпеливы. Надеюсь, это поможет кому-то еще.

Мой последний app.js

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Dimensions
} from 'react-native';

import { WebView } from 'react-native';

const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;

type Props = {};
export default class App extends Component<Props> {

  render() {
    return (
<View style={{flex:1}}>
  <WebView
   style={styles.webview}
   source={{uri: 'https://www.slack.com'}}
   javaScriptEnabled={true}
   domStorageEnabled={true}
   startInLoadingState={false}
   scalesPageToFit={true} />
</View>
    );
  }
}

const styles = StyleSheet.create({
  webview: {
    flex: 1,
    backgroundColor: 'yellow',
    width: deviceWidth,
    height: deviceHeight
  }
});

Ответ 8

У меня была такая же проблема, и я потратил день, пытаясь ее исправить. Я скопировал в примере веб-просмотра UIExplorer, и это не сработало.

В конечном итоге я завершил обновление, создав новый проект для реагирования и скопировав туда файлы и исправил его.

Мне жаль, что у меня не было лучшего ответа, почему это исправлено, но, надеюсь, помогает

Ответ 9

Я столкнулся с той же проблемой недавно. И я обнаружил, что

выравнивание: "центр"

был причиной проблемы для меня. Я прокомментировал это, и webView был загружен немедленно. Я нашел решение здесь: https://github.com/facebook/react-native/issues/5974 ответ 'brunocvcunha' работал для меня.

Ответ 10

Позвольте мне привести самый простой пример, который будет работать без проблем:

import React from 'react';
import { WebView  } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <WebView
      source={{uri: 'https://github.com/facebook/react-native'}} 
    />

    );
  }
}

Не добавляйте свой компонент WebView в представление, которое создало проблему, и URL-адрес веб-просмотра не отображается, вместо этого будут показаны стили представления.

Ответ 11

Я думаю, вы должны удалить это:

<View style={styles.container}>
</view>

Ответ 12

о да, он работает успешно. используйте это ==> https://github.com/react-native-community/react-native-webview

<View style={{ height: 150, width: 150,overflow:'hidden' }}>
     <WebView
        source={{ uri: 'https://github.com/facebook/react-native' }}
        scalesPageToFit={true}
     />
</View>

Ответ 13

Я делаю React Native Webview. Подскажите, пожалуйста, как сделать так, чтобы Webview загружал URI.

render() {
        return (
            <Modal
                animationType="slide"
                ref={"webModal"}
                style={{
                    justifyContent: 'center',
                    borderRadius: Platform.OS === 'ios' ? 30 : 0,
                    width: screen.width,
                    height: screen.height,borderColor:'red',
                    borderWidth: 5
                }}
                position='center'
                backdrop={false}
                onClosed={() => {
                    // alert("Modal closed");
                }}>

                <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 20, top: 10 }} >
                    <Text style={{ fontSize: 24, fontWeight: '700' }}>
                        Interests
                                 </Text>
                    <Icon name="ios-close" size={40} color='purple' onPress={() => { this.refs.webModal.close() }} />
                </View>
                <WebView
                    source={{ uri: this.state.link }}
                    style={{ marginTop: 20,borderColor:'green',
                    borderWidth: 5 }}
                />

            </Modal>
        );
    }
}