在运行时计算 FlatList 行组件的高度答案

【问题标题】：Calculating height for FlatList row components during run time在运行时计算 FlatList 行组件的高度
【发布时间】：2020-01-27 13:47:58
【问题描述】：

我想设计一个有 4 行的 FlatList，每行应该占据 FlatList 的 1/4 高度，每行之间的间距为 5px。作为一名原生 iOS 开发人员，我有点困惑如何在 react-native 的 FlatList 中实现这一点。我不知道在渲染行组件的哪个阶段可以应用计算。不应该遵循 sn-p 来实现我解释过的逻辑：

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

提前致谢。

【问题讨论】：

标签： react-native-ios react-native-flatlist

【解决方案1】：

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'
    }
})

【讨论】：