如何实现扩展到模态的卡片反应原生？

Question

我想实现卡片，类似于苹果在其重新设计的AppStore中做的事情（有扩展到页面的卡片，但是头部和背景图像被动画化为模态窗口的相同部分，并且当关闭模态时会发生相同的行为）。作为我的意思的例子：https://youtu.be/9myB9w1qRdM

这样做的正确方法是什么？

Answer 1

我认为这与您正在寻找的非常相似：https://github.com/ggomaeng/react-native-card-modal

它使用动画API和转换。

Answer 2

你也可以使用这个：https://www.npmjs.com/package/react-native-card-animated-modal

它也使用动画API，您可以自定义每张卡的内容及其外观。

回购的示例代码：

import CardList from "react-native-card-animated-modal";
import { View, Text } from "react-native";

const now = new Date();
const CARDS = [
  {
    image: {
      uri:
        "http://www.gamespersecond.com/media/2011/07/battlefield-3-poster.jpg"
    },
    height: 300,
    renderItem: ({ item, index }) => (
      <View>
        <Text>Customizable Content</Text>
      </View>
    )
  }
];

const App = () => (
  <CardList
    listProps={{
      ListHeaderComponent: () => (
        <View style={{ padding: 16, paddingBottom: 0 }}>
          <Text
            style={{
              fontSize: 13,
              color: "rgba(0, 0, 0, 0.5)"
            }}
          >
            {now.toDateString()}
          </Text>
          <Text style={{ fontSize: 32, fontWeight: "bold" }}>Featured</Text>
        </View>
      )
    }}
    data={CARDS}
    renderItem={({ item, index }) => {
      /* Render card per item */
      if (item.renderItem) return item.renderItem({ item, index });

      /* Default card when not specified */
      return (
        <View>
          <Text>Default Content</Text>
        </View>
      );
    }}
    renderDetails={({ item, index }) => (
      /* You can also provide custom content per item */
      <View style={{ paddingVertical: 30, paddingHorizontal: 16 }}>
        <Text style={{ color: "rgba(0, 0, 0, 0.7)", fontSize: 18 }}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </View>
    )}
  />
);