Реагировать на нативные элементы Flatlist с отрицательным запасом - PullRequest
Новая
       7

Реагировать на нативные элементы Flatlist с отрицательным запасом

0 голосов
/ 10 марта 2020

У меня есть простая вертикаль Flatlist на Android, и я хотел бы визуализировать некоторые из ее элементов с отрицательным полем. Цель состоит в том, чтобы эти элементы выглядели шире, чем плоский список.

Что-то вроде этого, когда красный цвет является элементом плоского списка:

Expected result

К сожалению, края элементов обрезаются по краю плоского списка.

Current result

Есть ли способ отобразить элементы, которые шире, чем плоский список, который их отображает?

РЕДАКТИРОВАТЬ: Я знаю, что могу добиться визуального представления на моей иллюстрации, добавив поля / отступы для каждого элемента в списке, кроме красного. Я хотел бы знать, можно ли сделать конкретный элемент c шире, чем сам плоский список (а не только шире, чем другие элементы)

Я бы предпочел стилизовать один элемент, который должен быть шире, чем все остальные.

Ответы [ 2 ]

0 голосов
/ 10 марта 2020

Всякий раз, когда вы хотите отобразить указанные c элементы без значения поля, единственное, что вам нужно сделать, это переопределить стиль.

Я создаю пример приложения в соответствии с вашими требованиями. 

import React, { Component } from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text } from 'react-native';

const DATA = [
    {
        id: 1,
        title: 'First Item',
    },
    {
        id: 2,
        title: 'Second Item',
    },
    {
        id: 3,
        title: 'Third Item',
    },
    {
        id: 4,
        title: 'Forth Item',
    },
    {
        id: 5,
        title: 'Fifth Item',
    },
    {
        id: 6,
        title: 'Sixth Item',
    },
];

export default class App extends Component {

    renderItems = ({ item }) => (
        // Suppose if you want to change margin value & background color of id == 3
        <View style={item.id !== 3 ? styles.item : [styles.item, { backgroundColor: 'red', margin: 0 }]}>
            <Text>{item.title}</Text>
        </View>
    )

    render() {
        return (
            <SafeAreaView style={styles.container}>
                <FlatList
                    data={DATA}
                    renderItem={this.renderItems}
                    keyExtractor={item => item.id}
                />
            </SafeAreaView>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 20,
    },
    item: {
        backgroundColor: 'green',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    },
});

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

0 голосов
/ 10 марта 2020

Я сам на самом деле никогда не делаю элемент в FlatList с более широким масштабом всего flatList, потому что я знаю, что это плохая идея и она выглядит ужасно, просто представьте элемент с перекрывающимся вертикальнымScrollIndicator. Но лучший способ заключается в том, что вы можете добавить View следующим образом. 

...FlatList tag.....
renderItem={({ item, index }) => {
  return (
    <View style={{ paddingHorizontal:item.isWider ? 0 : '5%' }}>
        ....Children
    </View>
  )
}}

Вы также можете написать оператор для работы только для определенного индекса предмета. Кстати, индикатор прокрутки не пересекается ни с одним элементом, и у него есть управляемый и лучше выглядящий интерфейс.

...