React native ios 计算运行时期间平面列表行组件的高度

我想设计一个有4行的平面列表，每行应该占据平面列表的1/4高度，每行之间的间距为5px。作为一名本地iOS开发人员，我有点困惑如何在react native的平面列表中实现这一点。我不知道在渲染行组件的哪个阶段可以应用计算。下面的代码片段不应该用来实现我所解释的逻辑吗

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

---

提前感谢。

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;

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

import React，{Component}来自'React'；
进口{
样式表，
安全区域视图
}从“反应本机”；
从“./components/SplitFlatList”导入SplitFlatList
类应用程序扩展组件{
render（）{
返回(
)
}
}
const styles=StyleSheet.create({
容器：{
弹性：1
},
标题：{
身高：200
}
})
导出默认应用程序；

SPLITFLATLIST.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;

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

import React，{Component}来自“React”
进口{
样式表，
看法
平面列表，
正文
}从“反应本机”
导出默认类SplitFlatList扩展组件{
构造函数（）{
超级（）
此.state={
组件高度：0
}
}
renderSeparator=（）=>{
报税表（
);  
};  
renderItem=（索引，项目）=>{
var{color}='white'
开关（索引）{
案例0：颜色=‘天蓝色’；中断
案例1：颜色=红色；中断
案例2：颜色='浅绿色'；中断
案例3：颜色=‘海军蓝’；中断
默认值：颜色='白色'；中断
}
返回(
项目
)
}
render（）{
返回(
this.setDimension（事件）}>
此.renderItem（索引，项）
}
ItemSeparatorComponent={this.renderSeparator}
scrollEnabled={false}
/>
)
}
设置维度（事件）{
console.log（event.nativeEvent.layout.height）
这是我的国家({
组件高度：event.nativeEvent.layout.height
})
}
}
const styles=StyleSheet.create({
容器：{
弹性：1
},
行：{
背景颜色：“粉色”
}
})