React native 如何使用flexbox和page ControlView设计排名

我想把名字放在左边，军衔放在右边。我尝试在flexDirection行之间留出一个空格或均匀地留出一个空格，但它仍然不起作用

你有什么解决办法吗

还有我的职能：

 renderRanking = () => {
    return this.state.ranking.map((element) => {
      return (
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-’‘’',
          }}>
          <View style={{flex: 1}}>
            <Text style={{fontSize: 20, color: 'white'}}>{element.club}</Text>

            <Text style={{fontSize: 20, color: 'white'}}>
              {element.moyenne}
            </Text>
          </View>
        </View>
      );
    });
  };

renderRanking=（）=>{
返回此.state.ranking.map（（元素）=>{
返回(
{element.club}
{element.moyenne}
);
});
};

还有我的作品

render() {
    return (
      <SafeAreaView style={{flex: 1, backgroundColor: 'black'}}>
        <View style={{flex: 1, backgroundColor: 'black'}}>
          <ScrollView>
            <View
              style={{
                flex: 1,
              }}>
              <Text>{this.OpenDecibels()}</Text>
            </View>

            <View style={{paddingBottom: 30}}>
              <PageControlView defaultPage={1}>
                <View>{this.renderRanking()}</View>
              </PageControlView>
            </View>
          </ScrollView>
        </View>
      </SafeAreaView>
    );
  }
}

render（）{
返回(
{this.OpenDecibels（）}
{this.renderRanking（）}
);
}
}

试试这种方法

<View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-’‘’',
          }}>
            <Text style={{fontSize: 20, color: 'white'}}>{element.club}</Text>

            <Text style={{fontSize: 20, color: 'white'}}>
              {element.moyenne}
            </Text>
</View>

{element.club}
{element.moyenne}

您应该在renderRanking函数中尝试下面的代码片段

renderRanking = () => {
    return this.state.ranking.map((element) => {
      return (
          <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
            <Text style={{fontSize: 20, color: 'white'}}>{element.club}</Text>

            <Text style={{fontSize: 20, color: 'white'}}>
              {element.moyenne}
            </Text>
          </View>
      );
    });
  };

renderRanking=（）=>{
返回此.state.ranking.map（（元素）=>{
返回(
{element.club}
{element.moyenne}
);
});
};

也改变

<PageControlView defaultPage={1}>
    <View>{this.renderRanking()}</View>
</PageControlView>

{this.renderRanking（）}

到

{this.renderRanking（）}

删除样式为{{flex:1，}的视图标记

<PageControlView defaultPage={1}>{this.renderRanking()}</PageControlView>