عمر سالم2

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

احاول بناء حقل بحث به حقل ادخال نصي وزر بحث. المشكلة ان الزر غير قابل للضغط عليه عندما يكون الحقل النصي focused. <View style={styles.searchBar}> <View style={styles.searchInput}> <View> <TextInput style={styles.textInput} placeholder="إبحث" multiline={false} autoFocus={true} /> </View> </View> <TouchableOpacity> <View style={styles.searchButton}> <Image style={styles.thumbnail} source={searchIcon}/> </View> </TouchableOpacity> </View> هل هناك طريقة لاجعل ToucableOpacity قابلة للضغط عندما يكون الحقل النصي focused؟

اقوم بعمل fetch من داخل التطبيق، ولكن لا احصل على النتائج الجديدة، مع ان قاعدة البيانات بها النتائج الجديدة... const getLatest = userId => { const url = API + '/user-content/' + userId; // .أحصل على نتائج قديمة فقط return fetch(url).then(response => response.json()); };

احاول كتابة كود للتأكد مما اذا كان الهاتف متصل بالانترنت، وان لم يكن، اريد فتح شاشة الاعدادات. componentWillMount(){ Linking.canOpenURL('app-settings:') .then(supported => { if (!supported) { console.log('Not supported URL: ' + url); } else { return Linking.openURL('app-settings:'); } }).catch(err => console.error('ERROR:', err)); } احصل على الخطأ: Not supported URL: app-settings

عندما اقوم بتشغيل التطبيق على Android عن طريق: react-native run-android احصل على الخطأ التالي: Could not initialize class com.android.sdklib.repository.AndroidSdkHandler

بعد إنشاء مشروع جديد، لم أتمكن من تشغيله بنجاح، حيث قمت بعمل: react-native init forum-app cd forum-app react-native run-forum-app ولكن يظهر لي الخطأ التالي: Failed to install the app. Make sure you have the Android development environment set up:

function Login() { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); return ( <View> <TextInput placeholder="User Name" value={username} onChangeText={setUsername} /> <TextInput placeholder="User Password" value={password} onChangeText={setPassword} /> <Button style={{ backgroundColor: '#AEF', color: '#000', borderRadius: 6 }} title="Log In" onPress={() => authenticate({ username, password })} /> </View> ); };

أحاول ان اخفي لوحة المفاتيح في React Native ولكنها لا تعمل

const App = () => { return ( <View style={{ width: '100%', height: '100%' }}> <SafeAreaView style={{ paddingLeft: 20, paddingRight: 20 }}> <FlatList contentContainerStyle={{ flexGrow: 1, display: 'flex' }} data={messages} ListHeaderComponent={ListHeaderComponent} renderItem={({ item, index, separators }) => ( <Message {...item} /> )} /> </SafeAreaView> <View style={{ position: 'absolute', bottom: 0, width: '100%', backgroundColor: 'rgba(250, 155, 123, 1)', padding: 12, display: 'flex', justifyContent: 'center', alignItems: 'center' }}> <Text style={{ borderRadius: 6, backgroundColor: 'rgba(0, 0, 0, .1)', color: '#fff', padding: 6 }}>Spam</Text> </View> </View> ); }; أريد القائمة نفسها ان يكون بها scroll، وليس الصفحة كلها...

import React from 'react'; import { View } from 'react-native'; // هل هناك طريقة أفضل؟ import constants from '../../../../constants'; const UserStatistics = ({ stats, updateStats }) => {}; export default App; هل هناك طريقة أفضل لاستيراد وحدات بعيدة باستخدام React Native (Babel)؟

كيف أحصل على حجم View موجود في التطبيق؟ حاولت استخدام Dimensions ولكنها لم تعمل؟ function App() { const viewRef = useRef(null); const computeSize = event => { console.log(viewRef.style.width, viewRef.style.height); }; return ( <View ref={viewRef}> <Button title="Get Size" onPress={computeSize} /> </View> ); }

import React from 'react'; import { Text, View } from 'react-native'; const useTypewriter = ({ text, time }) => { const [typewriter, setTypewriter] = React.useState(''); const [index, setIndex] = React.useState(0); React.useEffect(() => { const interval = setInterval(() => { if (index == text.length) { clearInterval(interval); } setTypewriter(typewriter + text[index]); setIndex(index + 1); }, time); // قم بالمسح في حالة قام المكون بالخروج في وقت باكر return () => clearInterval(interval); }, [typewriter, index]); return typewriter; }; function App() { const typewriter = useTypewriter({ text: 'Welcome!', time: 200 }); return ( <View style={{ padding: '20px' }}> <Text style={{ fontSize: '22px' }}>{typewriter}</Text> </View> ); } أحاول إنشاء كاتبه لتكتب احرف الكلمة حرف بحرف، ولكنها لا تتوقف..

يظهر لي الخطأ التالي عند تشغيل التطبيق: Unable to resolve module ./index from \node_modules\react-native\scripts/.: The module ./index could not be found from \node_modules\react-native\scripts/.. Indeed, none of these files exist

لدي تطبيق بصفحة رئيسية تشبه Instagram، ويجب أن يتمكن المستخدمون من نشر الصور. أريد أن تملأ الصور المنشورة من قبل المستخدمين العرض بالكامل (width)، ويتم حساب الارتفاع (height) تلقائيًا، بحيث تحافظ الصورة على نسبتها (ratio). أحاول الحصول على عرض الصورة وارتفاعها، لكنها لا تعمل. الصورة المرفقة هي 512 × 256، لذا يجب أن تملأ الصورة العرض بالكامل. وإذا كانت هناك صورة أكبر مثل 1024 × 512، فيجب أن تكون بنفس عرض الصورة الأولى، ويجب ألا تنفصل عن إطار العرض وتخرج عنه. function Home() { const [images, setImages] = React.useState([]); React.useEffect(() => { getImages().then(response => { setImages(response.images); }); }, []); return ( <View> { images.map(image => ( <Image source={{ uri: image.uri }} style={styles.image} /> )) } </View> ); }

لدي نموذج يحتوي على 8 مكونات للإدخال النصي. أحتاج إلى معالجة كل واحد، ولكن بدون كتابة دالة لكل مدخل نصي. import * as React from 'react'; import { Button, Text, TextInput, View } from 'react-native'; class InsuranceInformation extends React.Component { constructor(props) { super(props); this.state = { inputs: [ { type: 'text', label: 'الأسم الأول', value: '' }, { type: 'text', label: 'الأسم الثاني', value: '' }, { type: 'date', label: 'تاريخ الميلاد', value: '' }, { type: 'text', label: 'العنوان (1)', value: '' }, { type: 'text', label: 'العنوان (2)', value: '' }, { type: 'number', label: 'رقم الجوال', value: '' }, { type: 'text', label: 'رقم البطاقة', value: '' }, { type: 'number', label: 'رقم التأمين السابق', value: '' } ] }; this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(e) {} render() { const { title } = this.props; return ( <View> <Text>{title}</Text> { this.state.inputs.map(input => ( <TextInput onChangeText={() => {}} // ماذا اكتب هنا؟ placeholder={input.label} /> )) } <Button onPress={this.handleSubmit} title="إرسال" /> </View> ); } }

الصور لا تعمل import React from 'react'; import { View, Image } from 'react-native'; class DynamicImageComponent extends React.Component { render() { return ( <Image source={this.props.source} /> ); } }; class AppComponent extends React.Component { constructor(props) { super(props); this.state = { images: [ { source: './src/photos/01.jpg' }, { source: './src/photos/02.jpg' } ] }; } render() { let images = this.state.images.map(image => { return <DynamicImageComponent source={image.source} /> }); } return ( <View> { images } </View> ); }

لدي الكود التالي، وعند الضغط على "استمرار" لا تظهر الصورة.. import * as React from 'react'; import { Text, View, StyleSheet, Button, Image } from 'react-native'; class App extends React.Component { constructor() { super(); this.state = { completed: false }; this.handleCompleteAction = this.handleCompleteAction.bind(this); } handleCompleteAction(e) { this.setState({ completed: true }); } render() { const completed = this.state.completed; return ( <View> { completed ? <Image source={{ uri: "https://source.unsplash.com/512x512" }} /> : <Text>اضغط على استمرار</Text> } <Button onPress={this.handleCompleteAction} title="استمرار" /> </View> ); } } export default App;

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;

قمت باستخدام مكون تحميل وهمي ولكنه لا يعمل؟ import * as React from 'react'; import { Text, View, StyleSheet } from 'react-native'; function Feed() { return <Text>مرحباً</Text>; } function Loading() { return <Text>جاري التحميل</Text>; } class App extends React.Component { constructor() { super(); this.state = { ready: false }; } render() { setTimeout(function () { this.setState({ ready: true }); }, 3000); return ( <View> { this.state.ready ? <Feed /> : <Loading /> } </View> ); } } export default App;

اقوم بعمل form ومنها اريد ان ارسل رسالة الي رقم على واتسآب.

احاول عمل focus على المدخل النصي التالي بعد الانتهاء من الاول، ولكنها لا تعمل على iOS بالشكل الصحيح، حيث ان الـ keyboard يحدث بها خلل.. export default function App() { const nextRef = React.useRef(null); return ( <View style={styles.container}> <Text style={styles.heading}>تسجيل الدخول</Text> <TextInput onSubmitEditing={() => { nextRef.current.focus() }} style={styles.textInput} /> <TextInput ref={nextRef} style={styles.textInput} /> </View> ); }

بعد التحديث، اصبحت بعض سطور الـ console.log تطبع مرتين. ما المشكلة هنا: function getDerivedStateFromProps(nextProps, previousState) { if(previousState.name !== nextProps.name) { // تتم الطباعة مرتين console.log('مرحبا'); return { name: nextProps.name } } return {} }

كنت أعمل على كتابة Higher Order Component ليقوم بحقن حالة ديناميكية بداخل مكون معين: import * as React from 'react'; import { Text, View, StyleSheet } from 'react-native'; const withState = state => Component => { return <Component {...state} />; }; const Header = withState({ mode: 'Dark' })(({ mode }) => { return ( <Text>Active Mode: {mode} Mode</Text> ); }); export default function App() { return ( <View> <Header /> </View> ); } ولكن يظهر لي الخطأ التالي: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

أرغب في الحصول على عرض وارتفاع الـ View عند تغيير حجمه لتصميم التخطيط بشكل صحيح. import React from 'react'; import { View } from 'react-native'; import { Profile, Sidebar } from './shared'; function Feed() { return ( <View> <Profile /> <Sidebar /> </View> ); }

لقد قمت بكتابة الـ class التالي لعمل cache system في React Native باستخدام Expo File System. يحدث خطأ دائماً ErrorRecovery عند استخدام flush... import * as FileSystem from "expo-file-system"; import { __BASE_DIR__ } from './constants'; import { CacheEntry } from './CacheEntry'; class CacheManager { static _entries = {}; static fetch(uri, options) { if (!CacheManager._entries[uri]) { CacheManager._entries[uri] = new CacheEntry(uri, options); } return CacheManager._entries[uri]; } static async flush() { await FileSystem.deleteAsync(__BASE_DIR__); await FileSystem.makeDirectoryAsync(__BASE_DIR__); } }