React Native FlatList中的动态高度调整大小

Question

我是React Native的新手，我正在尝试使用具有动态高度的列表项创建FlatList。基本上，所有列表项都是numberOfLines设置为1且具有静态高度的Text，但是如果选择了列表项，则允许文本和高度扩展。跟踪所选项目作为状态变量。当前，当扩展列表项的高度时，列表项下方的任何列表项都不会重新呈现，并且最终会被截断，因此如何确保所有可见项仍被渲染？

原件：

选择项目后：

列表项：

const ListItem = (props) => {
  return (
    <View style={[
      styles.listItem,
      props.active ? styles.listItemActive : styles.listItemInactive,
      ]}
    >
      <TouchableOpacity style={styles.listItemText} onPress={props.onPress}>
        <Text numberOfLines={props.active ? null : 1}>{props.title}</Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.closeButton} onPress={props.onDelete}>
        <Text>X</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  listItem: {
    marginVertical: 10,
    backgroundColor: "#ccc",
    borderColor: "black",
    borderWidth: 1,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  listItemInactive: {
    height: 30,
  },
  listItemActive: {
    backgroundColor: "#95bdfc",
  },
  listItemText: {
    flex: 1,
    paddingLeft: 5,
    paddingVertical: 5,
  },
  closeButton: {
    width: "10%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#8c8b8b",
  },
});

单位列表：

<FlatList
    keyExtractor={(item, index) => item.id}
    data={goals}
    renderItem={(itemData) => (
      <GoalItem
        active={selectedGoal == itemData.item.id}
        onPress={changeSelectedItemHandler.bind(this, itemData.item.id)}
        onDelete={removeItemHandler.bind(this, itemData.item.id)}
        title={itemData.item.value}
      />
    )}
  />

Answer 1

您可以使用一些方法，例如：得到文本的长度，并据此得到高度的值；我要弄清楚；我的数据中有两个文本；

1. 'Hello World From React Native'
2. 'Hello'

因此，如果我想根据长度给它们不同的高度，则可以使用短而内联的if语句。

<View style={{height:props.text.length<10?20:30}}>
<Text> {props.text}</Text>
</View> 

我希望它会有所帮助