Настройка высоты для элемента в разделе в SectionList - PullRequest
Новая
       34

Настройка высоты для элемента в разделе в SectionList

0 голосов
/ 20 января 2020

В рамках изучения собственного реагирования я экспериментирую с различными функциями, как в родном iOS (TableView или CollectionView) или android приложении (RecycleView). Я реализовал пример экрана с помощью SectionList и FlatList, и теперь я хотел предоставить другую высоту для элемента или раздела в SectionList.

Ссылаясь на различные блоги, я видел пакет, который доступен в GitHub 'https://github.com/jsoendermann/rn-section-list-get-item-layout'. Может ли кто-нибудь предложить мне, что является стандартным способом достижения таких функций? Похоже, пакет последний раз обновлялся 2 года назад, поэтому я не предпочитаю его и ищу стандартное решение. Заранее спасибо.

1 Ответ

1 голос
/ 20 января 2020

Это то же самое, что и в списке разделов, или если вы хотите использовать плоский список, внутри которого вы предоставляете реквизит с именем renderItem, а внутри - свой пользовательский компонент. Так же, как вы делаете стили для любого пользовательского компонента, это то же самое. проверьте ниже, внутри функции Item я добавил styles.item в качестве стиля и добавил там высоту 80, вы можете поиграть. Проверьте ссылку exmaple : 

*import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  SectionList,
} from 'react-native';
import Constants from 'expo-constants';

const DATA = [
  {
    title: 'Main dishes',
    data: ['Pizza', 'Burger', 'Risotto'],
  },
  {
    title: 'Sides',
    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
  },
  {
    title: 'Drinks',
    data: ['Water', 'Coke', 'Beer'],
  },
  {
    title: 'Desserts',
    data: ['Cheese Cake', 'Ice Cream'],
  },
];

function Item({ title }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <SectionList
        sections={DATA}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <Item title={item} />}
        renderSectionHeader={({ section: { title } }) => (
          <Text style={styles.header}>{title}</Text>
        )}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
    marginHorizontal: 16,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    height:80
  },
  header: {
    fontSize: 32,
    margin:50
  },
  title: {
    fontSize: 24,
  },
});*

надеюсь, это поможет.

...