如何在React Native中将平面列表项从一个屏幕移动到另一屏幕

时间:2020-06-06 04:58:17

标签: reactjs react-native react-native-android react-native-flatlist react-native-navigation

我试图将待办事项列表项从一个屏幕转移到另一个屏幕。具体来说,当用户单击垃圾桶时,我希望将这些项目从主屏幕(Todo Now)转移到“完成”屏幕。

主屏幕(Todo Now)代码:

export default function Home({ navigation }) {
  const [modalOpen, setModalOpen] = useState(false);
  const [reviews, setReviews] = useState([
    {
      title: "Update old projects",
      rating: 2,
      body: "lorem ipsum",
      key: "1",
    },
    {
      title: "Fix React DevTools",
      rating: 5,
      body: "lorem ipsum",
      key: "2",
    },
    {
      title: "Download Yarn",
      rating: 4,
      body: "lorem ipsum",
      key: "3",
    },
  ]);

  const addReview = (review) => {
    review.key = Math.random().toString();
    setReviews((currentReviews) => {
      return [review, ...currentReviews];
    });
    setModalOpen(false);
  };

  const pressHandler = (key) => {
    setReviews((prevReviews) => {
      return prevReviews.filter((review) => review.key != key);
    });
      };

...
<FlatList
        data={reviews}
        renderItem={({ item }) => (
          <Card>
            <View style={styles.container}>
              <Text
                onPress={() => navigation.navigate("ReviewDetails", item)}
                style={globalStyles.titleText}
              >
                {item.title}
              </Text>
              <MaterialIcons
                onPress={() => pressHandler(item.key)}
                name="delete"
                style={styles.check}
                size={18}
                color={"#333"}
              />
            </View>
          </Card>
        )}
      />

完整的屏幕平面列表代码:

<FlatList
        data={reviews}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => navigation.navigate("ReviewDetails", item)}
          >
            <Card>
              <Text style={globalStyles.titleText}>{item.title}</Text>
            </Card>
          </TouchableOpacity>
        )}
      />

我需要进行哪些修改才能将待办事项从主屏幕(立即Todo)移动到“完成”屏幕(最好在单击待办事项之后)?

Home Screen (Todo Now) Completed Screen

0 个答案:

没有答案