كيف اتمكن من استعمال jQuery مع React Native

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

function SignInForm({ titleProp }) {
	const [title, setTitle] = useState(titleProp);

	useEffect(() => {
		jQuery('#title').css({ 'color': '#222' });
	}, []);

	return (
		<View>
			<Text id="title" style={{ color: '#000' }}>{title}</Text>
		</View>
	);
}

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

يمكنك استعمال jQuery ولكن ليس بهذا الشكل. لانه لا يمكنك استعمال jQuery مع React Native. السبب هو ان React Native لا يعتمد على الـ DOM او الـ HTML، وله التكوين الـ native الخاص به. تطبيقات React Native تعتمد على JavaScript في المنطق (Logic) والـ representation للـ view فقط، وليس رسم الـ view نفسه، لان ذلك هو مهمة الـ OS (Android or iOS).

يمكنك استخدام jQuery فقط اذا كنت تستعمل WebView لانه عبارة عن تحميل browser view بداخل التطبيق.

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

const html = `
  <html>
    <body>
      <h1 id="title">Hello!</h1>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script>
        jQuery('#title').css({ color: 'red' });
      </script>
    </body>
  </html>
`;

function App() {
  return (
    <WebView
      originWhitelist={['*']}
      source={{ html }}
    />
  );
}

export default App;