在View组件的中心对齐项目的问题

Question

我正在使用本机反应和styled-components并尝试将内容置于View组件的中间位置。

我的代码如下所示：

render() {
    return (
      <View>
        <FixturesContainer>
          {fixtures.map((fixture, i) => {
            return (
              <View key={fixture.fixture}>             
                <FixtureTextContainer>
                  <TeamText>{fixtureText[0]}</TeamText>
                  <FixtureText>{fixture.kickOffTime}</FixtureText>
                  <TeamText>{fixtureText[1]}</TeamText>
                </FixtureTextContainer>
              </View>
            )
          })}
        </FixturesContainer>
      </View>
    );
  }
}

const FixtureTextContainer = styled.View`
  display: flex;
  flex-direction: row;
  justify-content: center;
`

const FixtureText = styled.Text`
  color: rgb(51, 51, 51);
  padding: 10px;
  text-align: center;
`

const TeamText = styled.Text`
  color: rgb(51, 51, 51);
  padding: 10px;
  font-weight: 800;
`

看起来如下。您可以看到名称和时间未对齐。我尝试了text-align: center和justify-content的所有不同组合，但我无法集中这些组合。有人可以建议吗？