Проблема response-native-viewpager на iOS при удалении последнего элемента в массиве / представлении - PullRequest
Новая
       8

Проблема response-native-viewpager на iOS при удалении последнего элемента в массиве / представлении

1 голос
/ 06 мая 2020

Я могу удалить последнее представление / элемент из viewPager на android, и это переключит представление на предыдущий экран. Но в 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>
  );
};

пакет: @ response-native-community / response-native-viewpager

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

Проведя некоторое исследование, мы обнаружили, что это открытый проблема на GitHub

Есть ли какое-либо решение для этого или какой-либо обходной путь, который помогает отразить ту же функциональность и на iOS?

Я знаю, что есть другие сторонние пакеты также доступен, но я хотел бы посмотреть, смогу ли я сделать это, используя собственные модули ядра.

Если есть какие-то дополнительные сведения, дайте мне знать.

...