هل يمكن أن تنشئ لي تطبيقًا أساسيًا للمهام باستخدام React Native من فضلك؟
هل يمكن أن تنشئ لي تطبيقًا أساسيًا للمهام باستخدام React Native من فضلك؟
user
بالتأكيد! فيما يلي مثال لتطبيق مهام بسيط، تم إنشاؤه باستخدام React الأصلي:

استيراد React، { useState } من 'react'؛
استيراد { StyleSheet، View، FlatList، Alert، TouchableWithoutFeedback، Keyboard } من 'react-native'؛
استيراد الرأس من "./components/header"؛
استيراد TodoItem من './components/todoItem'؛
استيراد AddTodo من './components/addTodo'؛

تصدير الوظيفة الافتراضية التطبيق () {
  const [todos, setTodos] = useState([
    { النص: 'شراء القهوة'، المفتاح: '1' }،
    { النص: "إنشاء تطبيق"، المفتاح: "2" }،
    { النص: "التشغيل على المفتاح"، المفتاح: "3" }،
  ]);

  const pressHandler = (مفتاح) => {
    setTodos(prevTodos => {
      return prevTodos.filter(todo => todo.key != key);
    });
  };

  const SubmitHandler = (نص) => {
      setTodos(prevTodos => {
        يعود [
          { النص، المفتاح: Math.random().toString() }،
          ...السابقTodos
        ];
      });
    }

  يعود (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <عرض النمط={styles.container}>
        <الرأس />
        <عرض النمط={styles.content}>
          <AddTodo SubmitHandler={submitHandler} />
          <عرض النمط={styles.list}>
            <FlatList
              البيانات = {الأعمال الكاملة}
              renderItem={({ العنصر }) => (
                <TodoItem item={item} pressHandler={pressHandler} />
              )}
            />
          </عرض>
        </عرض>
      </عرض>
    </TouchableWithoutFeedback>
  );
}

أنماط ثابتة = StyleSheet.create({
  حاوية: {
    فليكس: 1،
    لون الخلفية: '#fff'،
  },
  محتوى: {
    الحشو: 40،
  },
  قائمة: {
    هامش أعلى: 20،
  },
});


مع ظهور "addToDo" بهذا الشكل...

استيراد React، { useState } من 'react'؛
استيراد {StyleSheet، View، TextInput، Button} من 'react-native'؛

تصدير الوظيفة الافتراضية AddTodo({ SubmitHandler }) {
  [text, setText] = useState('');

  const ChangeHandler = (val) => {
    setText(val);
  };

  يعود (
    <عرض>
      <إدخال النص
        نمط = {styles.input}
        العنصر النائب='المهام الجديدة...'
        onChangeText={changeHandler}
        القيمة = {نص}
      />
      <Button color='coral' onPress={() => SubmitHandler(text)} title='أضف ما يجب عمله' />
    </عرض>
  );
}

أنماط ثابتة = StyleSheet.create({
  مدخل: {
    هامش القاع: 10،
    الحشو أفقي: 8،
    الحشو العمودي: 6،
    عرض الحدود: 1،
    BorderBottomColor: '#ddd'،
  },
});

و"todoitem" تبدو هكذا....

استيراد رد فعل من "رد فعل"
استيراد {StyleSheet, TouchableOpacity, Text} من "react-native"؛

تصدير الوظيفة الافتراضية TodoItem({ pressHandler, item }) {
  يعود (
    <TouchableOpacity onPress={() => pressHandler(item.key)}>
      <نمط النص={styles.item}>{item.text}</Text>
    </TouchableOpacity>
  )
}

أنماط ثابتة = StyleSheet.create({
  غرض: {
    الحشو: 16،
    الهامش العلوي: 16،
    لون الحدود: '#bbb'،
    عرض الحدود: 1،
    نمط الحدود: "متقطع"،
    نصف قطر الحدود: 1،
    نصف قطر الحدود: 10،
  }
});
assistant