React Native 如何在响应本地大列表中设置自定义heightForIndexPath？

qyyhg6bp 于 2023-01-14 发布在 React

关注(0)|答案(1)|浏览(98)

我的输出：

我想要类似于此输出：

我想要像上面这样的输出
当数据隐藏时，数据空间也会像上面的视频一样隐藏，但当我尝试这样做时，它不起作用
隐藏数据时，如何同时隐藏数据空间？
我在项目中使用LargeList

App.js

import React from "react";
import { View, Image, Text, Platform, TouchableOpacity, StyleSheet, TextInput } from "react-native";
import { LargeList } from 'react-native-largelist-v3';
import { contacts } from "./DataSource";

export default class ContactExample extends React.Component {
  static navigationOptions = {
    title: "ContactExample"
  };

  largeList;

  constructor(props) {
    super(props);
    this.state = {
      shouldShow: [],
      data: contacts,
      Aheight: 60,
      A: true,
      B: true,
    };
  }

  A = () => {
    this.setState((previousState) => ({ A: !previousState.A }));
  };

  B = () => {
    this.setState((previousState) => ({ B: !previousState.B }));
  };


  render() {
    return (
      <LargeList
        heightForSection={() => 40}
        renderSection={this._renderSection}
        heightForIndexPath={() => 60}
        renderIndexPath={this._renderItem}
        data={this.state.data}
        renderHeader={this._renderHeader}
        renderFooter={this._renderFooter}
        headerStickyEnabled
        //initialContentOffset={{ x: 0, y: 0 }}
        renderEmpty={this._renderEmpty}
      />
    );
  }

  _renderHeader = () => {
    return (
      <View style={{ backgroundColor: "white" }}>
        <Text style={{ fontSize: 30, fontWeight: 'bold', textAlign: 'center', padding: 5 }}>Contact App</Text>
      </View>
    );
  };

  _renderEmpty = () => {
    return (
      <View style={styles.empty}>
        <Text>No results found</Text>
      </View>
    );
  };

  _renderFooter = () => {
    return (
      <View>
        <Text style={{ marginVertical: 20, alignSelf: "center" }}>This is the footer</Text>
      </View>
    );
  };

  _renderSection = (section) => {
    const contact = this.state.data[section];
    return (
      <>
        {contact.header == 'A' ?
          <TouchableOpacity style={styles.section} onPress={this.A}>
            <Text style={styles.sectionText}>{contact.header}</Text>
          </TouchableOpacity>
          : null}
        {contact.header == 'B' ?
          <TouchableOpacity style={styles.section} onPress={this.B}>
            <Text style={styles.sectionText}>{contact.header}</Text>
          </TouchableOpacity>
          : null}

      </>
    );
  };

  _renderItem = ({ section: section, row: row }) => {
    const contact = this.state.data[section].items[row];
    return (
      <>
        {contact.id == 1 ?
          <>
            {
              this.state.A ?
                <View style={styles.row}>
                  <Image source={{ uri: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU" }}
                    style={styles.image} />
                  <View style={styles.rContainer}>
                    <Text style={styles.title}>{contact.name}</Text>
                    <Text style={styles.subtitle}>{contact.contact}</Text>
                  </View>
                </View>
                : null
            }
          </>
          : null}
        {contact.id == 2 ?
          <>
            {
              this.state.B ? (
                <TouchableOpacity style={styles.row}>
                  <Image source={{ uri: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU" }}
                    style={styles.image} />
                  <View style={styles.rContainer}>
                    <Text style={styles.title}>{contact.name}</Text>
                    <Text style={styles.subtitle}>{contact.contact}</Text>
                  </View>
                </TouchableOpacity>
              ) : null
            }
          </>
          : null}

      </>
    );
  };
}

const styles = StyleSheet.create({
  search: {
    margin: 10,
    fontSize: 18
  },
  empty: {
    marginVertical: 20,
    alignSelf: "center"
  },
  section: {
    flex: 1,
    backgroundColor: "#EEE",
    justifyContent: "center"
  },
  sectionText: {
    fontSize: 20,
    marginLeft: 10
  },
  row: { flex: 1, flexDirection: "row", alignItems: "center" },
  image: { marginLeft: 16, width: 44, height: 44 },
  rContainer: { marginLeft: 20 },
  title: { fontSize: 18 },
  subtitle: { fontSize: 14, marginTop: 8 }
});

dummydata.js

import { iconObject as icons, iconArray } from "./icons";

let contacts = [
  {
    header: "A",
    items: [
      {
        id: 1,
        name: 'Aacgman',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        id: 1,

        name: 'Aadesh',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        id: 1,

        name: 'Aadi',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        id: 1,

        name: 'Aadidev',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        id: 1,

        name: 'Aadijay',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        id: 1,

        name: 'Aadimoolan',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        id: 1,
        name: 'Aadipat',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        id: 1,

        name: 'Aadit',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        id: 1,

        name: 'Aaditeya',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
    ]
  },
  {
    header: "B",
    items: [
      {
        id: 2,
        name: 'Baalaark',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        id: 2,
        name: 'Baalan',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        id: 2,
        name: 'Baalakrishan',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        id: 2,
        name: 'Baanbhatt',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        id: 2,
        name: 'Baanke Bihaari',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        id: 2,
        name: 'Baasim',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
    ]
  },
];

export { contacts };

package.json

"dependencies": {
    "@react-native-community/datetimepicker": "^6.7.1",
    "@react-navigation/bottom-tabs": "^6.4.1",
    "@react-navigation/native": "^6.0.14",
    "@react-navigation/native-stack": "^6.9.2",
    "axios": "^1.2.0",
    "moment": "^2.29.4",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-add-calendar-event": "^4.0.0",
    "react-native-big-list": "^1.6.0",
    "react-native-calendar-events": "^2.2.0",
    "react-native-calendars": "^1.1292.0",
    "react-native-contacts": "^7.0.5",
    "react-native-date-picker": "^4.2.6",
    "react-native-gifted-chat": "^1.0.4",
    "react-native-google-autocomplete": "^0.2.0",
    "react-native-google-places-autocomplete": "^2.5.1",
    "react-native-largelist-v3": "^3.1.0-rc.1",
    "react-native-paper": "^5.0.1",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2",
    "react-native-section-alphabet-list": "^3.0.0",
    "react-native-sectionlist-contacts": "^1.1.3",
    "react-native-spring-scrollview": "^3.0.2",
    "react-native-sqlite-storage": "^6.0.1",
    "react-native-sticky-header-flatlist": "^0.1.3",
    "react-native-track-player": "^3.2.0",
    "react-native-vector-icons": "^9.2.0",
    "react-places-autocomplete": "^7.3.0",
    "react-redux": "^8.0.5",
    "redux": "^4.2.0"
  },

我使用的是this示例

有人能帮我吗🐼

react-native

来源：https://stackoverflow.com/questions/75105632/how-to-set-custom-heightforindexpath-in-react-native-larglist

1条答案

按热度按时间

bvjxkvbb1#

请使用此属性。

heightForIndexPath={() => 'auto'}

下面是一个简单的例子。请查看this作为参考

<LargeList
   data={l_tracks}
   style={{flex: 1}}
   bounces={false}
   contentStyle={{backgroundColor: '#fff'}}
   showsVerticalScrollIndicator={false}
   heightForIndexPath={() => 'auto'}
   renderIndexPath={_renderItem}
/>

为不同项目使用自定义高度

const TrackHistoryScreen = () => {
  const {tracks} = useSelector(state => state.trackReducer);
  const [height_for_item, setHeightForItem] = useState(moderateScale(80));
  const [l_tracks, setLTracks] = useState([{header: '1', items: [...tracks]}]);
  const _renderItem = ({section: section, row: row}) => {
    const item = l_tracks[section].items[row];

    return <HistoryItem item={item} onPress={item => console.log(item)} />;
  };

  const _heightForIndexPath = indexPath => {
    const item = l_tracks[indexPath.row];
    item.type == "type1" return 100 
    item.type == "type2" return 200
    item.type == "type3" return 120 
    item.type == "type4" return 160
    
  };
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: colors.white,
      }}>
      <LargeList
        data={l_tracks}
        style={{flex: 1}}
        contentStyle={{backgroundColor: '#fff'}}
        showsVerticalScrollIndicator={false}
        heightForIndexPath={_heightForIndexPath}
        renderIndexPath={_renderItem}
      />
    </View>
  );
};

export default TrackHistoryScreen;

赞(0）回复(0）举报 2023-01-14

我来回答

React Native 如何在响应本地大列表中设置自定义heightForIndexPath？

1条答案

相关问题

热门标签

最新问答