如何将数组的开头放在屏幕中央？

问题描述

因此，我创建了一个基本的地图函数，可在屏幕上显示我们的数组：

let numbers = new Array(41);

  for (let i = 0,num = 0; i < numbers.length; i++,num += 5) {
    numbers[i] = num;
  }

{numbers.map((item,index) => {
            return (
              <Animated.View 
                key={index} 
                style={[
                  { transform: [{ translateY }] },]}
              >
                <Text style={styles.text} onPress={SampleFunction.bind(item)}>{item}</Text>
              </Animated.View> 
            );
          })}

但是此数组实际上从屏幕的开头开始。我希望该数组的第一个元素从中心开始，所以我该怎么做？

解决方法

我会考虑使用CSS Grid。它反应迅速且功能强大。

一个简单的例子是

<div className="grid">
    <element>You're code here </element>
</div>

CSS可能类似于：

.grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

有用的文章： CSS Grid: Justification and Alignment