React Native Webview không tải bất kỳ url nào (Phản hồi xem web gốc không hoạt động)

Question

Tôi đang cố gắng triển khai thành phần webview phản ứng gốc trong ứng dụng của mình, nhưng chế độ xem web không tải bất kỳ url nào chỉ hiển thị trang trắng.

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 
    } 
}); 

Dưới đây là ảnh chụp màn hình của đầu ra.

Answer 1

Dưới đây là mẩu mã mà làm việc cho tôi.

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

Answer 2

Tôi đã gặp phải vấn đề tương tự và đã dành một ngày cố gắng khắc phục sự cố. Tôi đã sao chép trong ví dụ về webview của UIExplorer và điều đó không hiệu quả.

Cuối cùng tôi đã kết thúc nâng cấp phản ứng và tạo dự án phản ứng gốc mới và sao chép các tệp trong đó và sửa nó.

Tôi ước gì có một câu trả lời tốt hơn là để tại sao mà cố định nó, nhưng hy vọng rằng sẽ giúp

Answer 3

Tôi đang gặp phải vấn đề tương tự. Những gì tôi quan sát được là WebView không hoạt động nếu được lồng vào nhau. Nếu thành phần chỉ trả về WebView, thì mọi thứ đều ổn.

Answer 4

Tôi gặp sự cố này. WebView sẽ hiển thị khi nó là thành phần duy nhất được trả về, nhưng không phải khi được lồng trong một thành phần Chế độ xem khác.

Vì lý do tôi không hoàn toàn chắc chắn về sự cố đã được giải quyết bằng cách đặt thuộc tính chiều rộng trên thành phần 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 
    } 
}); 

Answer 5

Nếu bạn muốn thành phần hiển thị toàn bộ trang, bạn cần bọc nó với Chế độ xem có flex: 1. Mã bên dưới hoạt động cho tôi:

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

Answer 6

WebView hoạt động tốt trên Android. Tuy nhiên bạn cần phải kích hoạt javascript và lưu trữ dom cho một số trang web.

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

Answer 7

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

và phong cách như sau:

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 
    } 
}; 

Tất cả điều này để đối phó với kích thước webview xấu, vì vậy chỉ cần thiết lập một chiều cao cụ thể và chiều rộng cụ thể quá (deviceHeight và deviceWidth như ví dụ trên) .

Địa chỉ