احتاج المساعدة في حفظ مجموعة من الكائنات "الملاحظات" في الـ AsyncStorage

في هذه الإجابة أفترض أنك تستخدم الـ functional component.

في البداية يجب ان تعرّف state باسم notes كالتالي :

const [notes, setNotes] = useState([]);

وبعد ذلك قوم بإحضار البيانات من الـ AsyncStorage في الـ useEffect ونضيف الـ [] الفارغة كباراميتر لها حتى تستدعى مرة واحدة عند فتح الصفحة. كالتالي :

const [notes, setNotes] = useState([]);
useEffect(() => {
  const value = await AsyncStorage.getItem("notes");
  const parsed = JSON.parse(value)
  setNotes(parsed);
}, []);

وتقوم بتعديل الكود الخاص بحفظ الـ notes في الـ asyncStorage ليصبح بالشكل :

const saveNoteHandler = async()=> {
.
.
.
  try{	
    const da = [...notes , body];
    await AsyncStorage.setItem("notes" , d);
    setNotes(da);
    .
    .
    .
  } catch(e){
	console.log(e)
  }    
  .
  .
  .
}

ولقد اعتمدت على الكود الذي استخدمته أنت في سؤالك السابق :

حيث ان الكود التالي :

const da = [...notes , body];

يعني ان تقوم بتوزيع الـ array  المسمى notes داخل الـ array المسمى da ثم تضيف الـ الكائن body لها ليصبح لديك array يحتوي كل البيانات السابقة بالإضافة للمكون الجديد.

والـ 

setNotes(da);

حتى نقوم بحفظ البيانات في الـ state بعد حفظها في الـ AsyncStorage.

ليصبح الكود بالكامل :

const [notes, setNotes] = useState([]);
useEffect(() => {
  const value = await AsyncStorage.getItem("notes");
  const parsed = JSON.parse(value)
  setNotes(parsed);
}, []);

const saveNoteHandler = async()=> {
.
.
.
  try{	
    const da = [...notes , body];
    await AsyncStorage.setItem("notes" , d);
    setNotes(da);
    .
    .
    .
  } catch(e){
	console.log(e)
  }    
  .
  .
  .
}

وحتى نعرض هذه البيانات المحفوظة في الـ state نكتب :

{notes?.map((note , index) =>{
  return (
    <View key={index}>
      <Text>{note.name}</Text>
      <Text>{note.email}</Text>
      <Text>{note.pass}</Text>
    </View>
  )
})}

حيث نقوم بعمل map على الـ state المسماة notes ولكل note نقوم بإعادة view تحتوي التفاصيل.

والـ key مهمة حتى يستطيع react متابعة الكائن الذي انشأته.

واشارة الاستفهام في notes?.map من اجل التأكد من أن notes موجودة، فإذا لم تكن موجودة لا يقوم بعمل map.

بتاريخ 1 ساعة قال عمر قره محمد:

في هذه الإجابة أفترض أنك تستخدم الـ functional component.

في البداية يجب ان تعرّف state باسم notes كالتالي :

const [notes, setNotes] = useState([]);

وبعد ذلك قوم بإحضار البيانات من الـ AsyncStorage في الـ useEffect ونضيف الـ [] الفارغة كباراميتر لها حتى تستدعى مرة واحدة عند فتح الصفحة. كالتالي :

const [notes, setNotes] = useState([]);
useEffect(() => {
  const value = await AsyncStorage.getItem("notes");
  const parsed = JSON.parse(value)
  setNotes(parsed);
}, []);

وتقوم بتعديل الكود الخاص بحفظ الـ notes في الـ asyncStorage ليصبح بالشكل :

const saveNoteHandler = async()=> {
.
.
.
  try{	
    const da = [...notes , body];
    await AsyncStorage.setItem("notes" , d);
    setNotes(da);
    .
    .
    .
  } catch(e){
	console.log(e)
  }    
  .
  .
  .
}

ولقد اعتمدت على الكود الذي استخدمته أنت في سؤالك السابق :

حيث ان الكود التالي :

const da = [...notes , body];

يعني ان تقوم بتوزيع الـ array  المسمى notes داخل الـ array المسمى da ثم تضيف الـ الكائن body لها ليصبح لديك array يحتوي كل البيانات السابقة بالإضافة للمكون الجديد.

والـ 

setNotes(da);

حتى نقوم بحفظ البيانات في الـ state بعد حفظها في الـ AsyncStorage.

ليصبح الكود بالكامل :

const [notes, setNotes] = useState([]);
useEffect(() => {
  const value = await AsyncStorage.getItem("notes");
  const parsed = JSON.parse(value)
  setNotes(parsed);
}, []);

const saveNoteHandler = async()=> {
.
.
.
  try{	
    const da = [...notes , body];
    await AsyncStorage.setItem("notes" , d);
    setNotes(da);
    .
    .
    .
  } catch(e){
	console.log(e)
  }    
  .
  .
  .
}

وحتى نعرض هذه البيانات المحفوظة في الـ state نكتب :

{notes?.map((note , index) =>{
  return (
    <View key={index}>
      <Text>{note.name}</Text>
      <Text>{note.email}</Text>
      <Text>{note.pass}</Text>
    </View>
  )
})}

حيث نقوم بعمل map على الـ state المسماة notes ولكل note نقوم بإعادة view تحتوي التفاصيل.

والـ key مهمة حتى يستطيع react متابعة الكائن الذي انشأته.

واشارة الاستفهام في notes?.map من اجل التأكد من أن notes موجودة، فإذا لم تكن موجودة لا يقوم بعمل map.

قمت يذالك ولاكن عند الذهب الى الشاشه لاستعراض البيانات لا يظهر في الشاشه اي شي 

InsertInputMo.js

 طبعا الاكواد عمليه الادخال والحفظ في شاشه  .. 

   والاستيراد والعرض في شاشه اخرى