当前位置：文江博客话题详情

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

发布于 2025-02-03 12:52:06 字数 453 浏览 0 评论 0原文

我在为产品详细信息创建可扩展的视图时遇到了问题。任何人都可以帮助我了解如何创建像附件一样的可扩展视图。我想像用户单击产品详细信息容器一样，它将显示产品详细信息。请帮助我，因为我是新手反应本地的。

。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

悲凉≈ 2025-02-10 12:52:06

首先，创建需要扩展的ExpanableView组件， prop。应在父组件中设置/更新道具本身（IS扩展）。在此中添加效果依赖性，在ExpanableView中扩展了 prop以运行动画。请注意，每次exped的值都会更改，它都会重新启动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

/I.SSTATIC.NET/M8EZ4.GIF“ RER =“ Noreferrer”>

First, create ExpandableView component that requires expanded prop. The prop itself should be set/updated in parent component (isExpanded). Add effect dependency to this expanded prop in ExpandableView to run the animation. Notice that every time isExpanded's value is changed, it rerenders ExpandableView component. Make sure rerendering happens only when needed, or you'll have performance issue.

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