WebView لا يعمل في React Native

عمر سالم2 · 21 مارس 2021

import React from 'react';
import { Text, View } from 'react-native';
import { WebView } from 'react-native-webview';

const html = `<h1>التطبيق جاهز الآن</h1>`;

function SplashScreen() {
  return <Text>جاري التحميل</Text>;
}

function App() {
  const [ready, setReady] = React.useState(false);

  React.useEffect(() => {
    setTimeout(() => {
      setReady(true);
    }, 4000);
  });

  return (
    <View>
      {
        ready ? <WebView originWhitelist={['*']} source={{ html }} /> : <SplashScreen />
      }
    </View>
  );
}

export default App;

إسلام عبدالعزيز · 21 مارس 2021

يمكنك حل هذه المشكلة عن طريق عمل render للـ WebView بداخل Fragment بدلاً من View. يمكنك أيضاً إستعمال StyleSheet لتحديد خاصية العرض (width) وسوف يعمل الـ WebView بعدها.

function App() {
  const [ready, setReady] = React.useState(false);

  React.useEffect(() => {
    setTimeout(() => {
      setReady(true);
    }, 4000);
  });

  return (
    <>
      {
        ready ? <WebView originWhitelist={['*']} source={{ html }} /> : <SplashScreen />
      }
    </>
  );
}