如何在 React Native 中为产品详细信息创建可扩展视图？

Question

我在为产品详细信息创建可扩展视图时遇到问题。任何人都可以帮助我了解如何创建可扩展视图，如所附图片。我想如果用户单击产品详细信息容器，它将显示产品详细信息。请帮助我，因为我对原生反应还很陌生。

.

Answer 1

首先，创建需要 expanded 属性的 ExpandableView 组件。 prop 本身在父组件中应该是 set/updated (isExpanded)。将 Effect 依赖项添加到 ExpandableView 中的此 expanded 道具以运行动画。请注意，每次 isExpanded 的值更改时，它都会重新呈现 ExpandableView 组件。确保仅在需要时才重新渲染，否则会出现性能问题。

import React, { useEffect, useState } from "react";
import {
  StyleSheet,
  View,
  TouchableOpacity,
  Animated,
  Text,
} from "react-native";

const ExpandableView = ({ expanded = false }) => {
  const [height] = useState(new Animated.Value(0));

  useEffect(() => {
    Animated.timing(height, {
      toValue: !expanded ? 200 : 0,
      duration: 150,
      useNativeDriver: false
    }).start();
  }, [expanded, height]);

  // console.log('rerendered');

  return (
    <Animated.View
      style={{ height, backgroundColor: "orange" }}
    ></Animated.View>
  );
};

function App() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <View style={styles.app}>
      <TouchableOpacity
        onPress={() => {
          setIsExpanded(!isExpanded);
        }}
        style={styles.toggle}
      >
        <Text style={styles.toggleText}>Expand</Text>
      </TouchableOpacity>
      <ExpandableView expanded={isExpanded} />
    </View>
  );
}

const styles = StyleSheet.create({
  app: {},
  toggle: {
    width: 100,
    height: 30,
    backgroundColor: "blue",
    justifyContent: "center",
    alignItems: "center"
  },
  toggleText: {
    color: "#fff"
  }
});

export default App;

https://codesandbox.io/s/expandableview-qpkznz

如何在 React Native 中为产品详细信息创建可扩展视图？

How to create Expandable View for Product Details in React Native?

expandablelistview

reactjs

react-native