reactjs - چگونه یک TouchableOpacity به شکل قرص در React Native بسازیم؟

در حال حاضر دکمه خود را با حاشیه‌ها به شکل مستطیلی نمایش می‌دهم و می‌خواهم بدانم چگونه می‌توانم دو طرف آن را گرد کنم تا یک آیکون به شکل قرص ایجاد کنم. من سعی کرده‌ام borderRadius را به style اضافه کنم اما به نظر نمی‌رسد که کار کند. آیا چیزی واقعاً ساده وجود دارد که به طور پیش‌فرض در TouchableOpac

ادامه مطلب →

reactjs - React Native Flatlist با Typescript: ویژگی 'data' در نوع اختیاری است اما در نوع 'Readonly>' الزامی است

این فهرست مسطح من است:

<FlatList {...omit(this.props, [ "id", "loading", ])} nestedScrollEnabled renderItem={this.renderItem} onEndReached={this.onEndReached} ListFooterComponent={this

ادامه مطلب →

typescript - React Native && Firebase && useContext - "TypeError: null is not an object (evaluating '_ref.user')" با خطای onAuthStateChanged

این خطا در فایل useCachedResources.ts من رخ می‌دهد اما مطمئن نیستم چرا. این‌ها سه فایلی هستند که من با آن‌ها کار می‌کنم. حدس میزنم که مشکل مربوط به مقدار اولیه null بودن برای بار اول باشد اما من به‌صورت شرطی مجموعه‌های ناوبری Auth و App خود را رندر می‌کنم. همچنین، useCachedResources با قالب ارائه شده بود، شاید باید onAuthStateChanged فایربیس را داخل آن اضافه کنم؟

AuthenticatedUserProvider.tsx

import { useState, createContext } from 'react'; export interface IUser { uuid

ادامه مطلب →

جاوااسکریپت - ری‌اکت نیتیو: شمارنده وضعیت به‌روز شده صحیح را نمایش نمی‌دهد

من در تلاش هستم یک شمارنده ساده ایجاد کنم که مقدار یک مورد را تغییر دهد. با استفاده از هوک‌ها برای مدیریت وضعیت آن، مقدار را در صفحه به درستی به‌روزرسانی می‌کنم. با این حال، مقداری که وضعیت هنگام لاگ کردن در کنسول نشان می‌دهد همیشه یک واحد کمتر از مقداری است که روی صفحه نمایش داده می‌شود.

به عنوان

ادامه مطلب →

TypeScript - رندر آهسته تصویر در React Native

تصویر دانلود شده است، اما هنوز خیلی کند رندر می‌شود، کسی می‌داند چه اتفاقی ممکن است بیفتد؟

توضیح تصویر را اینجا وارد کنید

این کد من است:

import React from 'react' import { StyleSheet, Image, Text, View } from 'react-native' import Backgroundimage from '../../../assets/images/backgroundImage.jpg' export default function ImageContainer() { return ( <View style={styles.ImageContainer}> <Image source={Backgroundimage} style={styles.Backgroundimage}/> </Vi

ادامه مطلب →

جاوااسکریپت - استفاده از NativeWind با React Native Paper

من از Native Wind و React Native Paper با تایپ‌اسکریپت استفاده می‌کنم. می‌خواهم ویژگی‌های "className" و "tw" را به نماهای Paper خود اضافه کنم.

من قبلاً آن را در نماهای دیگرم با استفاده از اعلان‌هایی مانند این اضافه کرده‌ام:

import "react-native"; declare module "react-native" { interface F

ادامه مطلب →

reactjs - مسیرهای tsconfig در react native حل نمی‌شوند

من در حال تلاش برای استفاده از گزینه paths در فایل tsconfig.json خود در TypeScript هستم. قبلاً از paths در سایر برنامه‌های وب خود با React استفاده کرده‌ام. با این حال، به دلایلی، Native از کار با آن امتناع می‌کند.

این فایل tsconfig.json من است:

ادامه مطلب →

جاوااسکریپت - چگونه می‌توانیم یک کلاس را در کامپوننت تابعی ریکت-نیتیو بدون گسترش آن با React.Component تعریف و استفاده کنیم؟

من فقط می‌خواهم یک کلاس در کامپوننت تابعی ایجاد کنم. متغیر را داخل آن کلاس اعلام کرده و از آن در کامپوننت تابعی استفاده کنم.

اینجا app.js من است:

const App = () => { const [count, setCount] = useState(0); const

ادامه مطلب →

جاوااسکریپت - استفاده از layout.tsx در ری‌اکت نیتیو اکسپو چیست؟

قبلاً من از js برای نوشتن کد react native expo استفاده می‌کردم اما اکنون Typescript به زبان پیش‌فرض برای expo تبدیل شده است (قبلاً زبان پیش‌فرض برای react native CLI بود)، بنابراین من کمی نسبت به تغییرات جدید سردرگم شده‌ام.

ما باید کد خود را در فایلی به نام index.tsx بنویسیم که داخل دایرکتوری app قرار دارد و فایل layout.tsx نیز داخل همان دایرکتوری است و کد ناوبری stack به صورت پیش‌فرض نوشته شده است، اما من نمی‌توانم صفحات دیگری را به درستی اضافه کنم. مشکل اصلی من ناوبری بین صفحا

ادامه مطلب →

تایپ‌اسکریپت ناوبری ری‌اکت نیتیو

من در تایپ کردن props خود در یک کامپوننت که انتظار پارامتر دارد مشکل دارم. من مستندات را خوانده‌ام و راهنماها را دنبال کرده‌ام. این کامپوننت من است که پارامتر دریافت می‌کند.

type PoiDetailsProps = NativeStackScreenProps<RootStackParamList, 'PoiDetails'>; const PoiDetails = (props: PoiDetailsProps) => {

لیست پارامترهای RootStack من:

export type RootStackParamList = { Home: undefined; Profile: undefined; Drawer: undefined; Login: und

ادامه مطلب →