مشكلة في React Native

يفضل في هكذا مشكلة، إرفاق الشيفرات مباشرة وشرح كيفية استخدامك لها (ضع الشيفرات التي تعتقد أنها سبب المشكلة في السؤال ضمن محرر الأكواد) واشرح عنها

بتاريخ 13 دقائق مضت قال Amer Alsubari:

السلام عليكم
عندي مشكلة في تطبيق ( من تطويري )
فكرة التطبيق بشكل مبسط انه الشخص يضيف مهام يومية,اسبوعية..الخ
المشكلة هي
انا مسوي صفحة لاضافة المهام وصفحة ثانية لتصفح المهام
عندما احط مهمة المهمة تنضاف في صفحة اضافة المهام مو صفحة تصفح المهام !
هذا الملف اذا بتقدر تساعدني 💕

taskApp.zip

هل من المفترض أن تظهر المهام في صفحة home?

بتاريخ 2 دقائق مضت قال شرف الدين2:

هل من المفترض أن تظهر المهام في صفحة home?

نعم
واضافة المهام في صفحة addtask

بتاريخ 2 دقائق مضت قال Amer Alsubari:

نعم
واضافة المهام في صفحة addtask

حسنا يوجد لديك مشكلتان

1. أنك لم تقوم بكتابة شفرة من أجل إظهار المهام , يجب كتابة شفرة كتلك في صفحة الإظهار

   {todos.map(todo => (
             <TodoList
               key={todo.key}
               todo={todo}
               deleteTodo={deleteTodo}
             />
           ))}

    

2. أنت ﻻ يمكنك الوصول إلى المهام التي يتم إنشاؤها في صفحة الaddTask , حيث أنك تنشئها في state خاصة بتلك الصفحة, فﻻ يمكن لباقي الصفحات الوصول لها, الحل أن تقوم بمحاولة إرسالها إلى صفحة الإظهار على هيئة props والذي سيكون معقداً نوعا ما, فالحل الأفضل أن تقوم بجعل الstate مُشتركة بين الصفحات عبر إستخدام الcontext api أو ال redux ولكن بما أنك لم تتعلم الredux بعد فيمكنك الأن إستعمال الcontext api والتي ستكون سهلة نسبياً مقارنةً بالredux 

بتاريخ 3 ساعات قال شرف الدين2:

حسنا يوجد لديك مشكلتان

1. أنك لم تقوم بكتابة شفرة من أجل إظهار المهام , يجب كتابة شفرة كتلك في صفحة الإظهار

   
   {todos.map(todo => (
             <TodoList
               key={todo.key}
               todo={todo}
               deleteTodo={deleteTodo}
             />
           ))}

    

2. أنت ﻻ يمكنك الوصول إلى المهام التي يتم إنشاؤها في صفحة الaddTask , حيث أنك تنشئها في state خاصة بتلك الصفحة, فﻻ يمكن لباقي الصفحات الوصول لها, الحل أن تقوم بمحاولة إرسالها إلى صفحة الإظهار على هيئة props والذي سيكون معقداً نوعا ما, فالحل الأفضل أن تقوم بجعل الstate مُشتركة بين الصفحات عبر إستخدام الcontext api أو ال redux ولكن بما أنك لم تتعلم الredux بعد فيمكنك الأن إستعمال الcontext api والتي ستكون سهلة نسبياً مقارنةً بالredux 

م فهمت🙂💔
كيف استعملها؟ او كيف اكتبها بالكود حقي مثلا؟

بتاريخ 18 ساعات قال Amer Alsubari:

م فهمت🙂💔
كيف استعملها؟ او كيف اكتبها بالكود حقي مثلا؟

الcontext api هي عبارة عن مكتبة لتسهيل إدارة الحالة(state management) حيث تمكنك من جعل الstate يتم مشاركتها في التطبيق ككل وليست خاصة بكل صفحة, ونقوم بإنشاء الcontext عبر الشفرة البرمجية التالية

const MyContext = React.createContext({
tasks:defaultValue,
setTasks:()=>{}
});

وتستبدل ال defaultValue بالقيمة الإبتدائية للstate , في حالتك هنا من المنطقي أن تكون القيمة الإبتدائية عبارة عن مصفوفة فارغة حيث يكون المستخدم عن بداية التطبيق ليس لديه أي مهام بعد

وعندما نريد الوصول إلى الstate الموجودة في الcontext نقوم بوضع الcomponent التي نريد إتاحة الcontext لها داخل وسم يحمل إسم الcontext متبوعاً بكلمة .profider  بعد إستدعاء ال MycContext كما مُوضح في الشفرة التالية

import MyContext from "./Context/MyContext";
import Header from "./Components/Header";
function App() {
  const [tasks, setTask] = useState(false);
  return (
    <MyContext.Provider value = {tasks, setTask}>
      <div>
        <Header />
        
      </div>
    </MyContext.Provider>
  );
}

export default App;

ومن أجل إستدعاء قيمة ال state داخل إحدى تلك الcomponents الموضوعة داخل الMyContext.Provider نقوم بإستخدام الخُطاف(hoom) المُسمى useContext 

  const [tasks,setTasks]= useContext(MyContext)

ونقوم بتغيير قيمة الtask عن طريق إستخدام setTask

setTasks(yourValue)

 وذلك رابط لتوثيق ال context

https://wiki.hsoub.com/React#.D8.A7.D8.B3.D8.AA.D8.AE.D8.AF.D8.A7.D9.85_.D8.A7.D9.84.D8.B3.D9.8A.D8.A7.D9.82_.28Context.29

بتاريخ 18 ساعات قال شرف الدين2:

الcontext api هي عبارة عن مكتبة لتسهيل إدارة الحالة(state management) حيث تمكنك من جعل الstate يتم مشاركتها في التطبيق ككل وليست خاصة بكل صفحة, ونقوم بإنشاء الcontext عبر الشفرة البرمجية التالية

const MyContext = React.createContext({
tasks:defaultValue,
setTasks:()=>{}
});

وتستبدل ال defaultValue بالقيمة الإبتدائية للstate , في حالتك هنا من المنطقي أن تكون القيمة الإبتدائية عبارة عن مصفوفة فارغة حيث يكون المستخدم عن بداية التطبيق ليس لديه أي مهام بعد

وعندما نريد الوصول إلى الstate الموجودة في الcontext نقوم بوضع الcomponent التي نريد إتاحة الcontext لها داخل وسم يحمل إسم الcontext متبوعاً بكلمة .profider  بعد إستدعاء ال MycContext كما مُوضح في الشفرة التالية

import MyContext from "./Context/MyContext";
import Header from "./Components/Header";
function App() {
  const [tasks, setTask] = useState(false);
  return (
    <MyContext.Provider value = {tasks, setTask}>
      <div>
        <Header />
        
      </div>
    </MyContext.Provider>
  );
}

export default App;

ومن أجل إستدعاء قيمة ال state داخل إحدى تلك الcomponents الموضوعة داخل الMyContext.Provider نقوم بإستخدام الخُطاف(hoom) المُسمى useContext 

  const [tasks,setTasks]= useContext(MyContext)

ونقوم بتغيير قيمة الtask عن طريق إستخدام setTask

setTasks(yourValue)

 وذلك رابط لتوثيق ال context

https://wiki.hsoub.com/React#.D8.A7.D8.B3.D8.AA.D8.AE.D8.AF.D8.A7.D9.85_.D8.A7.D9.84.D8.B3.D9.8A.D8.A7.D9.82_.28Context.29

طيب و الButton اللي يضيف المهمة وش احط عليه خاصية عشان يضيف المهمة ؟