Javascript 均匀显示本地ScrollView元素的空间

我目前有一个列出文本项的滚动视图。我在每一页上用4个项目给它分页。例如，我列出了月份名称，这很有效，因为12可以被4整除。我有3页，每页4个条目，条目的间距相等。我使用justifyContent:“周围的空间”来实现这一点。这使得我的示例能够显示我希望事情如何对齐，但是当有更多的项目时，它是不灵活的

如果我在开头添加一个名为“ALL”的额外文本元素，我想要的是第1页上的所有行军，间隔均匀。第2页上的4月至7月看起来相同，第3页上的8月至11月看起来相同，第4页上的12月在左侧。我已经添加了一个零食以及下面的代码。希望我已经提供了足够的细节

import React，{Component}来自“React”；
进口{
看法
滚动视图，
使用窗口尺寸，
样式表，
正文
}从“反应本族语”；
从“时刻”导入时刻
const HorizontalTextCarousel=道具=>{
const numberOfItems=React.Children.count（props.Children）；
const itemsPerInterval=props.itemsPerInterval？props.itemsPerInterval:4；
const[width，setWidth]=React.useState（0）；
常量[TotalInterval，SetTotalInterval]=React.useState（0）；
const adjustContent=w=>{
设定宽度（w）；
设t=Math.ceil（numberOfItems/itemsPerInterval）；
console.log（t）
设置总间隔（t）；
};
返回(
调整内容（w）}
PaginEnabled={true}>
/*取消对以下行的注释以查看未正确对齐的内容。
/想让它看起来就像物品数量相等时一样吗
可整除，除非有一个额外的页面上有'DEC'*/
//取消对此的注释
全部的
{props.children}
);
};
const getMonths=（）=>
[…数组（12）].map（（_el，i）=>(
{矩（）
.月份（i）
.format（'MMM'）}
));
类应用程序扩展组件{
render（）{
返回(
{getMonths（）}
);
}
}
const styles=StyleSheet.create({
scrollViewContainer:{
为内容辩护：“周围的空间”，
背景颜色：“蓝色”，
},
月文字：{
颜色：'白色'，
字体大小：24
}
})
导出默认应用程序；

我通过在另一个视图下为每个页面包装项目的功能解决了这个问题。然后我对这些包装器视图进行分页，而不是对单个项目进行分页

因此，我的渲染函数输出如下内容。尽管滚动视图有6个项目，但我将它们分组到视图中，每个视图中最多有4个项目

  return (
<View style={{width: '100%'}}>
  <ScrollView
    contentContainerStyle={{
      width: `${numberOfWrapperViews*100}%', //in this example this would be 200% b/c 2 wrapper views (Math.ceil(total items to render (6)/max items per page(4))
      backgroundColor: '`',
      justifyContent: 'space-evenly'
    }}
    horizontal={true}
    alwaysBounceHorizontal={true}
    bounces={true}
    decelerationRate="fast"
    showsHorizontalScrollIndicator={false}
    scrollEventThrottle={200}
    pagingEnabled={true}>
  <View
      style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly'}}>
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>ABC</Text> 
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>EFG</Text>
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>ABC</Text> 
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>EFG</Text>
    </View>
    <View
      style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly'}}>
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>HIJ</Text> 
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>KLM</Text>
    </View>
  </ScrollView>
</View>

返回(
我通过在另一个视图下为每个页面包装项目来解决这个问题，然后我对这些包装视图而不是单个项目进行分页

因此，我的渲染函数输出如下内容。尽管滚动视图有6个项目，但我将它们分组到视图中，每个视图中最多有4个项目

  return (
<View style={{width: '100%'}}>
  <ScrollView
    contentContainerStyle={{
      width: `${numberOfWrapperViews*100}%', //in this example this would be 200% b/c 2 wrapper views (Math.ceil(total items to render (6)/max items per page(4))
      backgroundColor: '`',
      justifyContent: 'space-evenly'
    }}
    horizontal={true}
    alwaysBounceHorizontal={true}
    bounces={true}
    decelerationRate="fast"
    showsHorizontalScrollIndicator={false}
    scrollEventThrottle={200}
    pagingEnabled={true}>
  <View
      style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly'}}>
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>ABC</Text> 
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>EFG</Text>
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>ABC</Text> 
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>EFG</Text>
    </View>
    <View
      style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly'}}>
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>HIJ</Text> 
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>KLM</Text>
    </View>
  </ScrollView>
</View>

返回(