React Native: how to build a list without a defined item size? (Item size depending on the content inside it)

huangapple go评论65阅读模式
英文:

React Native: how to build a list without a defined item size? (Item size depending on the content inside it)

问题

我正在开发一个类似评论屏幕的功能。正如我们所知,评论的长度不同,通常需要更多或更少的空间来容纳在列表项内。

但显然,在我的FlatList中,我无法想出如何保持项目的大小可伸缩/动态,除非为它们全部提供一个硬编码的高度,请帮忙我想知道是否有任何自定义包可以做到这一点,还是我只能对我的列表进行一些技巧。

我的目标的小示范:

React Native: how to build a list without a defined item size? (Item size depending on the content inside it)

附言:我使用FlatList,因为我有一个很长的项目列表,无法对其进行硬编码。

英文:

I am developing a feature similar to a comment screen. As we know, comments have different lengths in which often require bigger or lesser space to contain itself inside a list item.

But apparently, inside my flatlist I am out of ideas to keep the size of the item scalable/dynamic, except for giving them all a hard-coded height, please help! I am wondering if there is any custom package that does this, or I just have to do some tricks to my list.

Little Demo of My Goal:

React Native: how to build a list without a defined item size? (Item size depending on the content inside it)

P.S: I am using a flatlist because I have a long list of item, in which I can't hard code a list.

答案1

得分: 1

你不需要为评论父组件视图定义高度。

import * as React from "react";
import {
  Text,
  View,
  StyleSheet,
  FlatList,
  Image,
  Dimensions,
} from "react-native";
import Constants from "expo-constants";

const comments = [
  {
    id: 1,
    username: "elonmusk",
    message:
      "If I dig my grave deep enough, maybe it comes out other side of Earth 🌌",
    avatar:
      "https://pbs.twimg.com/profile_images/1590968738358079488/IY9Gx6Ok.jpg",
  },
  {
    id: 2,
    username: "ValaAfshar",
    message: "This incredible animation shows how deep humans have dug.",
    avatar: "https://pbs.twimg.com/profile_images/1259558245/vala_300dpi.jpg",
  },
  {
    id: 3,
    username: "Erdayastronaut",
    message:
      "In my opinion this is you at your best. Getting super deep into really nerdy aspects of rocket science. No agenda, division or trolling. Just pure rocket science. Now THAT is inspiring and uniting! Let’s get humans to Mars!!!",
    avatar:
      "https://pbs.twimg.com/profile_images/1253477073265532928/MmGBMWsQ.jpg",
  },
];

export default function App() {
  const renderItem = ({ item }) => (
    <View
      style={{
        backgroundColor: "white",
        borderRadius: 10,
        borderWidth: 0.3,
        borderColor: "#333",
        marginBottom: 5,
        padding: 10,
      }}
    >
      <View style={{ flexDirection: "row", paddingVertical: 2 }}>
        <Image
          source={{ uri: item.avatar }}
          style={{ width: 30, height: 30, borderRadius: 30 / 2 }}
        />
        <View style={{ paddingHorizontal: 5 }}>
          <Text style={{ fontWeight: "700" }}> {item.username} </Text>
          <Text style={{ width: Dimensions.get("window").width - (60 + 20) }}>
            {item.message}
          </Text>
        </View>
      </View>
    </View>
  );
  return (
    <View style={styles.container}>
      <FlatList
        data={comments}
        renderItem={renderItem}
        keyExtractor={({ id }) => id.toString()}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
});

演示链接 - https://snack.expo.dev/@emmbyiringiro/eea97f

英文:

You don't need to define height for comment parent component view.

import * as React from &quot;react&quot;;
import {
  Text,
  View,
  StyleSheet,
  FlatList,
  Image,
  Dimensions,
} from &quot;react-native&quot;;
import Constants from &quot;expo-constants&quot;;

const comments = [
  {
    id: 1,
    username: &quot;elonmusk&quot;,
    message:
      &quot;If I dig my grave deep enough, maybe it comes out other side of Earth &#129300;&quot;,
    avatar:
      &quot;https://pbs.twimg.com/profile_images/1590968738358079488/IY9Gx6Ok.jpg&quot;,
  },
  {
    id: 2,
    username: &quot;ValaAfshar&quot;,
    message: &quot;This incredible animation shows how deep humans have dug.&quot;,
    avatar: &quot;https://pbs.twimg.com/profile_images/1259558245/vala_300dpi.jpg&quot;,
  },
  {
    id: 3,
    username: &quot;Erdayastronaut&quot;,
    message:
      &quot;In my opinion this is you at your best. Getting super deep into really nerdy aspects of rocket science. No agenda, division or trolling. Just pure rocket science. Now THAT is inspiring and uniting! Lets get humans to Mars!!!&quot;,
    avatar:
      &quot;https://pbs.twimg.com/profile_images/1253477073265532928/MmGBMWsQ.jpg&quot;,
  },
];

export default function App() {
  const renderItem = ({ item }) =&gt; (
    &lt;View
      style={{
        backgroundColor: &quot;white&quot;,
        borderRadius: 10,
        borderWidth: 0.3,
        borderColor: &quot;#333&quot;,
        marginBottom: 5,
        padding: 10,
      }}
    &gt;
      &lt;View style={{ flexDirection: &quot;row&quot;, paddingVertical: 2 }}&gt;
        &lt;Image
          source={{ uri: item.avatar }}
          style={{ width: 30, height: 30, borderRadius: 30 / 2 }}
        /&gt;
        &lt;View style={{ paddingHorizontal: 5 }}&gt;
          &lt;Text style={{ fontWeight: &quot;700&quot; }}&gt; {item.username} &lt;/Text&gt;
          &lt;Text style={{ width: Dimensions.get(&quot;window&quot;).width - (60 + 20) }}&gt;
            {item.message}
          &lt;/Text&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    &lt;/View&gt;
  );
  return (
    &lt;View style={styles.container}&gt;
      &lt;FlatList
        data={comments}
        renderItem={renderItem}
        keyExtractor={({ id }) =&gt; id.toString()}
      /&gt;
    &lt;/View&gt;
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: &quot;center&quot;,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: &quot;#ecf0f1&quot;,
    padding: 8,
  },
});


Live Demo - https://snack.expo.dev/@emmbyiringiro/eea97f

huangapple
  • 本文由 发表于 2023年1月9日 07:07:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/75051929.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定