javascript - 删除数组/视图中的最后一项时，iOS 上的 react-native-viewpager 问题

Question

我可以从 android 上的 viewPager 中删除最后一个视图/项目，它会将视图切换到上一个屏幕。但同样的事情在 iOS 中不起作用。在 iOS 上，它会删除最后一个视图，但不会切换并显示空白页面，但是当您滚动旧视图时会再次呈现。

ViewPages.js

import React, { useState, useEffect } from "react";
import { Image, ScrollView } from "react-native";
import {
  Container,
  View,
  Button,
  Text,
  Left,
  Right,
  Content,
  Icon,
  Header,
  Fab
} from "native-base";
import { useTemplateState } from "../../../contexts/TemplateContext";
import {
  useScreenTypeState,
  useScreenTypeUpdate
} from "../../../contexts/ScreenTypeContext";

import CardView from "./CardView";

import ViewPager from "@react-native-community/viewpager";

export const ScreenTypeSelection = ({ route }) => {
  let { screenCount } = useTemplateState();
  let dispatch = useScreenTypeUpdate();
  let value = useScreenTypeState();
  const [active, setActive] = useState(false);

  useEffect(() => {
    dispatch({ type: "screen", payload: { screenCount } });
  }, []);

  const [currentIndex, setCurrentIndex] = useState(0);
  const [currentPage, setCurrentPage] = useState(0);

  return (
    <ScrollView contentContainerStyle={{ flex: 1 }}>
      <ViewPager
        style={{ flex: 1 }}
        initialPage={currentPage}
        onPageSelected={e => setCurrentIndex(e.nativeEvent.position)}
        showPageIndicator={true}
      >
        {value.length > 0 &&
          value.map((card, index) => {
            return (
              <View style={{ alignItems: "center" }} key={index}>
                <CardView key={card.pageNumber} card={card} />
              </View>
            );
          })}
      </ViewPager>
      <Fab
        active={active}
        direction="up"
        containerStyle={{}}
        style={{ backgroundColor: "#5067FF" }}
        position="bottomRight"
        onPress={() => setActive(!active)}
      >
        <Icon name="create" />
        <Button
          style={{ backgroundColor: "#3B5998" }}
          onPress={() => {
            dispatch({
              type: "delete_page",
              payload: { currentIndex }
            });
            setCurrentPage(currentIndex - 1 < 0 ? 0 : currentIndex - 1);
          }}
        >
          <Icon name="remove" />
        </Button>
        <Button
          style={{ backgroundColor: "#34A34F" }}
          onPress={() => {
            dispatch({
              type: "add_page",
              payload: { currentIndex }
            });
            setCurrentPage(currentIndex + 1 )
          }}
        >
          <Icon name="add" />
        </Button>
      </Fab>
    </ScrollView>
  );
};

包：@react-native-community/react-native-viewpager

Github：https ://github.com/react-native-community/react-native-viewpager

在做了一些研究后发现这是GitHub 上的一个开放问题

是否有任何解决方案或任何解决方法有助于在 iOS 上反映相同的功能？

我知道还有其他可用的第三方包，但我想看看我是否可以使用 react-native 核心模块来做到这一点。

如果需要更多细节，请告诉我。

标签： javascriptiosreact-nativereact-native-androidreact-native-ios