Расчет высоты компонентов строки FlatList во время выполнения - PullRequest
Новая
       53

Расчет высоты компонентов строки FlatList во время выполнения

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

Я хотел создать FlatList с 4 строками, каждая строка должна занимать 1/4 высоты FlatList с интервалом 5 пикселей между каждой строкой. Как нативный iOS разработчик, я немного запутался, как это можно реализовать в FlatList реагирующего натива. Я не знаю, на каком этапе рендеринга компонента строки, расчет может быть применен. Не следует использовать следующий фрагмент кода для реализации логики c, которую я объяснил: 

getItemLayout={(data, index) => (
  {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}

Заранее спасибо.

1 Ответ

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

APP. JS

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

import SplitFlatList from './components/SplitFlatList'

class App extends Component {

  render() {
    return(
      <SafeAreaView style={styles.container}>
        <SplitFlatList></SplitFlatList>
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  header: {
    height: 200
  }
})

export default App;

SPLITFLATLIST. JS

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

export default class SplitFlatList extends Component {
    constructor() {
        super()

        this.state = {
            componentHeight: 0
        }
    }

    renderSeparator = () => {  
        return (  
            <View  
                style={{  
                    height: 5,  
                    width: "100%",  
                    backgroundColor: 'white',  
                }}  
            />  
        );  
    };  

    renderItem = (index, item) => {
        var { color } = 'white'

        switch(index) {
            case 0: color = 'skyblue'; break
            case 1: color = 'red'; break
            case 2: color = 'lightgreen'; break
            case 3: color = 'navy'; break
            default: color = 'white'; break
        }

        return(
            <View style={[styles.row, {height: (this.state.componentHeight - 15) / 4}, {backgroundColor: color}]}>
                <Text>item</Text>
            </View>
        )
    }

    render() {
        return(
            <View style={styles.container} onLayout = {event => this.setDimension(event)}>
                <FlatList  
                    data = {['1', '2', '3', '4']} 
                    renderItem = {({item, index}) => 
                        this.renderItem(index, item)
                    }
                    ItemSeparatorComponent = {this.renderSeparator} 
                    scrollEnabled = {false}
                />
            </View>
        )
    }

    setDimension(event) {
        console.log(event.nativeEvent.layout.height)
        this.setState({
            componentHeight: event.nativeEvent.layout.height
        })
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    row: {
        backgroundColor: 'pink'
    }
})
...