我想在待办事项列表应用程序中将异步存储添加到我的平面列表中

Question

我想在待办事项列表应用程序中将异步存储添加到我的平面列表中。

这是我的 App.js 代码：

import { StatusBar } from 'expo-status-bar';
import {
  StyleSheet,
  Text,
  View,
  KeyboardAvoidingView,
  FlatList,
  TextInput,
  TouchableOpacity,
  Keyboard,
} from 'react-native';
import React, { useState, useEffect } from 'react';
import {
  Poppins_100Thin,
  Poppins_100Thin_Italic,
  Poppins_200ExtraLight,
  Poppins_200ExtraLight_Italic,
  Poppins_300Light,
  Poppins_300Light_Italic,
  Poppins_400Regular,
  Poppins_400Regular_Italic,
  Poppins_500Medium,
  Poppins_500Medium_Italic,
  Poppins_600SemiBold,
  Poppins_600SemiBold_Italic,
  Poppins_700Bold,
  Poppins_700Bold_Italic,
  Poppins_800ExtraBold,
  Poppins_800ExtraBold_Italic,
  Poppins_900Black,
  Poppins_900Black_Italic,
} from '@expo-google-fonts/poppins';
import { useFonts } from 'expo-font';
import Task from './components/Task';
import AppLoading from 'expo-app-loading';


export default function App() {
  const [task, setTask] = useState();
  const [taskItems, setTaskItems] = useState([]);


  let [fontsLoaded, error] = useFonts({
    Poppins_100Thin,
    Poppins_100Thin_Italic,
    Poppins_200ExtraLight,
    Poppins_200ExtraLight_Italic,
    Poppins_300Light,
    Poppins_300Light_Italic,
    Poppins_400Regular,
    Poppins_400Regular_Italic,
    Poppins_500Medium,
    Poppins_500Medium_Italic,
    Poppins_600SemiBold,
    Poppins_600SemiBold_Italic,
    Poppins_700Bold,
    Poppins_700Bold_Italic,
    Poppins_800ExtraBold,
    Poppins_800ExtraBold_Italic,
    Poppins_900Black,
    Poppins_900Black_Italic,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }
 
  const handleAddTask = async () => {
    try {
      Keyboard.dismiss();
      setTaskItems([...taskItems, task]);
      setTask('');
    } catch (err) {
      console.log(err);
    }
  };

  const completeTask = (index) => {
    let itemsCopy = [...taskItems];
    itemsCopy.splice(index, 1);
    setTaskItems(itemsCopy);
  };
  const deleteItem = (index) => {
    let arr = [...taskItems];
    arr.splice(index, 1);
    setTaskItems(arr);
  };
  return (
    <View style={styles.container}>
      {/* Todays Tasks */}

      <View style={styles.taskWrapper}>
        <Text style={styles.sectionTitle}>Today's Tasks</Text>
        <View style={styles.items}>
          {/* This is where the tasks will go! */}
          <FlatList
            data={taskItems}
            keyExtractor={(item) => item.id}
            renderItem={({ item, index }) => (
              <Task text={item} handleDelete={() => deleteItem(index)} />
            )}
          />
        </View>
      </View>

      {/* Write a Task */}
      <KeyboardAvoidingView style={styles.writeTaskWrapper}>
        <TextInput
          style={styles.input}
          placeholder={'Write A Task'}
          value={task}
          onChangeText={(text) => setTask(text)}
        />
        <TouchableOpacity onPress={() => handleAddTask()}>
          <View style={styles.addWrapper}>
            <Text style={styles.addText}>+</Text>
          </View>
        </TouchableOpacity>
      </KeyboardAvoidingView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#E8EAED',
  },
  taskWrapper: {
    paddingTop: 80,
    paddingHorizontal: 20,
  },
  sectionTitle: {
    fontSize: 24,
    backgroundColor: '#fff',
    fontFamily: 'Poppins_600SemiBold',
    borderRadius: 10,
    margin: 'auto',
    width: 250,
    height: 60,
    textAlign: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
    elevation: 5,
    paddingTop: 10,
  },
  items: {
    marginTop: 30,
  },
  writeTaskWrapper: {
    position: 'absolute',
    bottom: 60,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  input: {
    paddingVertical: 15,
    paddingHorizontal: 15,
    backgroundColor: '#fff',
    borderRadius: 60,
    width: 250,

    fontFamily: 'Poppins_400Regular',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 3,
  },
  addWrapper: {
    width: 60,
    height: 60,
    backgroundColor: '#fff',
    borderRadius: 60,
    justifyContent: 'center',
    alignItems: 'center',

    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 3,
  },
  addText: {},
});

这是我的 TASK.JS 代码：

import React from 'react';
import {View,Text,StyleSheet,Dimensions,Animated,TouchableOpacity} from 'react-native';
import AppLoading from 'expo-app-loading'
import { 
    Poppins_100Thin,
    Poppins_100Thin_Italic,
    Poppins_200ExtraLight,
    Poppins_200ExtraLight_Italic,
    Poppins_300Light,
    Poppins_300Light_Italic,
    Poppins_400Regular,
    Poppins_400Regular_Italic,
    Poppins_500Medium,
    Poppins_500Medium_Italic,
    Poppins_600SemiBold,
    Poppins_600SemiBold_Italic,
    Poppins_700Bold,
    Poppins_700Bold_Italic,
    Poppins_800ExtraBold,
    Poppins_800ExtraBold_Italic,
    Poppins_900Black,
    Poppins_900Black_Italic 
  } from '@expo-google-fonts/poppins'
  import {useFonts} from 'expo-font'
import Swipeable from 'react-native-gesture-handler/Swipeable';

const SCREEN_WIDTH = Dimensions.get('window').width;

const Task = (props) => {
    let [fontsLoaded,error]=useFonts({
        Poppins_100Thin,
        Poppins_100Thin_Italic,
        Poppins_200ExtraLight,
        Poppins_200ExtraLight_Italic,
        Poppins_300Light,
        Poppins_300Light_Italic,
        Poppins_400Regular,
        Poppins_400Regular_Italic,
        Poppins_500Medium,
        Poppins_500Medium_Italic,
        Poppins_600SemiBold,
        Poppins_600SemiBold_Italic,
        Poppins_700Bold,
        Poppins_700Bold_Italic,
        Poppins_800ExtraBold,
        Poppins_800ExtraBold_Italic,
        Poppins_900Black,
        Poppins_900Black_Italic 
        })
        if (!fontsLoaded){
          return <AppLoading/>
        }
    const leftSwipe = (progress, dragX) => {
    const scale = dragX.interpolate({
      inputRange: [0, 100],
      outputRange: [0, 1],
      extrapolate: 'clamp',
    });
    return (
      <TouchableOpacity onPress={props.handleDelete} activeOpacity={0.6}>
        <View style={styles.deleteBox}>
          <Animated.Text style={{transform: [{scale: scale}],color:'#fff',fontFamily:"Poppins_400Regular",fontSize:18}}>
            Delete
          </Animated.Text>
        </View>
      </TouchableOpacity>
    );
  };
    return(
        <Swipeable renderLeftActions={leftSwipe}>
        <View style={styles.item}>
            <View style={styles.itemLeft}>
                <View style={styles.square}>

                </View>
                <Text style={styles.itemText}>
                {props.text}
                </Text>
            </View>
            <View style={styles.circular}>

            </View>
            
        </View>
        </Swipeable>
        
    )
}

const styles = StyleSheet.create({
    item:{
        backgroundColor:'white',
        padding:15,
       borderRadius:10,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom:20,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.5,
        shadowRadius: 2,  
        elevation: 3
    },
    
    itemLeft:{
        flexDirection: 'row',
        alignItems: 'center',
        flexWrap:'wrap',
    },
    
    square:{
        width:24,
        height:24,
        backgroundColor:'#55BCF6',
        opacity:0.5,
        borderRadius:5,
        marginRight:15,
    },
    
    itemText:{
        maxWidth:'80%',
        fontFamily:'Poppins_400Regular'

    },
    
    circular:{
        width:12,
        height:12,
        borderColor:'#55BCF6',
        borderWidth:2,
        borderRadius:5
    },
    deleteBox:{
        backgroundColor:'red',
        justifyContent:'center',
        alignItems:'center',
        width:100,
        height:55,
        borderRadius:10,
        shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.5,
    shadowRadius: 2,  
    elevation: 5,
    }
});

export default Task;

我正在学习 React Native，所以不太了解它

所以我想添加异步存储，以便它显示重新打开应用程序后创建的任务

请帮忙提供代码

是的，我已经使用 expo 和 swipeable 来删除任务

Answer 1

导入async-storage

import AsyncStorage from '@react-native-async-storage/async-storage';

获取存储任务

const task await AsyncStorage.getItem('task')
if(task!=null) 
switch(task{
... your cases ...

设置任务

await AsyncStorage.setItem('task', 'taskName')

万一刷新任务

await AsyncStorage.removeItem('keyName')

我想在待办事项列表应用程序中将异步存储添加到我的平面列表中

I want to add Async Storage to my flatlist in todo list app

local-storage

react-native

asyncstorage

expo