عمر سالم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> ); } }