عمر سالم2

import * as React from 'react'; import { View, Text, FlatList, Button } from 'react-native'; import * as WebBrowser from 'expo-web-browser'; import * as AuthSession from 'expo-auth-session'; const redirection = AuthSession.makeRedirectUri({ native: 'path://', useProxy: true }); function MyComponent() { const authRequest = AuthSession.useAuthRequest({ clientId: 'G545-YU32-IOW3-453D', redirectUri: redirection, scopes: [ 'profile', 'email' ] }, AuthSession.useAutoDiscovery(); ); const [ request, result, prompt ] = authRequest; return ( <View> <Button title="Log In" disabled={!request} onPress={() => promptAsync({ useProxy: true })} /> </View> ); }

لدي المكون التالي لعرض فيديو في وضع ال Landscape ولكن لا ترجع الشاشة الى وضعها العادي بعد اغلاق الفيديو.. import * as React from 'react'; import { View } from 'react-native'; import { Button, Video } from 'expo-av'; import * as ScreenOrientation from 'expo-screen-orientation'; const VIDEO_URI = 'MY_VIDEO_URI_GOES_HERE'; export default function App() { const video = React.useRef(null); const [status, setStatus] = React.useState({}); return ( <View> <Video ref={video} source={{ uri: VIDEO_URI }} useNativeControls resizeMode="cover" onPlaybackStatusUpdate={status => setStatus(() => status)} onFullscreenUpdate={async ({ fullscreenUpdate }) => { if (fullscreenUpdate === Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT) { await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE); } else { await ScreenOrientation.unlockAsync(ScreenOrientation.OrientationLock.LANDSCAPE); } return true; }} /> <View> <Button title={status.isPlaying ? 'Pause' : 'Play'} onPress={() => status.isPlaying ? video.current.pauseAsync() : video.current.playAsync() } /> </View> </View> ); }

لدي الدالة Generator التالية، ولكن لا تعمل في الـ saga chain بشكل سليم... export function* appOnLoad() { const {mode, theme} = all({ mode: loadString('APP_MODE'), theme: loadString('APP_THEME'), }); if (typeof mode === 'string' && checkKeyInObject(APP_MODE_URL, mode)) { yield put(onSetAppMode(mode as ModeType)); } if (typeof theme === 'string' && checkKeyInObject(MyAppTheme, theme)) { yield put(onSetAppTheme(theme as ThemeType)); } yield put(onLoadAppEnd()); }

احاول انشاء service عن طريق RxJS و Redux Toolkit ولكن الدالة getProfile لا تعطيني النتيجة المطلوبة. import { createSlice } from "@reduxjs/toolkit" import { ofType } from "redux-observable" import { Observable, of } from "rxjs" import { catchError, map, switchMap } from "rxjs/operators" import APIService from "./api.service" const initialState = { profile: null, authenticated: false } const userSlice = createSlice({ name: "user", initialState, reducers: { getProfileSuccess: (state, action) => ({ ...state, profile: action.payload, authenticated: true }) } }) // ??? const getProfile = (actions) => ( actions.pipe( switchMap(() => { APIService.getProfile().pipe( map(res => getProfileSuccess(res)) ) }) ) )

لدي 3 مكونات، ويوجد مكون رابع اسمه Content ولكن لا استطيع فهم الكود بداخله. import * as React from 'react'; import { Text, View, StyleSheet } from 'react-native'; import * as R from "ramda"; function Loading() { return <Text>Loading...</Text>; } function NoNewPosts() { return (<Text>There are no new posts.</Text>); } function Feed() { return ( <Text>Showing posts!</Text> ); } // ??? const Container = (function () { return R.cond([ [R.prop('loading'), Loading], [R.pipe(R.prop('posts'), R.isEmpty), NoNewPosts], [R.T, Feed] ]); })(); export default function App() { return ( <View> <Container posts={[]} loading={false}></Container> </View> ); }

لقد قمت بعمل Hook اسمها useForm بالشكل التالي: function useForm() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const values = { email, password }; const check = () => {}; return { values, check, setEmail, setPassword }; } اريد ان اقوم بكتابة الدالة check لتقوم من التحقق من النموذج، ومعرفة هل هو صالح للـ submit ام لا. كيف اقوم بكتابة تلك الدالة؟

مرحباً، أعمل على عمل state management باستخدام Redux Saga ولكن عندي مشكلة انه اريد عمل middleware ليحل كل الـ sagas الموجودة عندي. لقد قمت باستخدام Promise.all ولكنها لم تعمل. import authSagas from './auth/sagas'; import notificationSagas from './notification/sagas'; function rootSagas() { Promise.all([...authSagas, notificationSagas]); } export default rootSagas;

لدي تطبيق React Native سيتصل بقاعدة Back-End حقيقية، ولكن اريد ان استخدم fake API اثناء عملية التطوير export default function Home() { const [questions, setQuestions] = useState([]); useEffect(() => { fetch('/api/questions') .then(response => response.json()) .then(json => setQuestions(json.questions)) }); return ( <View> { questions.map(q => <Question title={q.title} />) } </View> ); }

أحاول إنشاء ميزة تحميل سريع للصور مثل Instagram، عندما أقوم بإغلاق التطبيق وإعادة فتحه، يجب أن تكون الصور قد تم تحميلها بالفعل