如何使用 flexbox 设计排名？

Question

我很难把名字俱乐部放在左边，把他的等级放在右边。

有人可以帮我吗？

我正在尝试使用 flexDirection 'column' 和 'row' 但数字总是粘贴到名称俱乐部 让我们来看看我的功能

renderClassement = () => {
    return this.state.sport.clubs.map((element) => {
      return (
        <SafeAreaView>
          <View
            style={{
              flexDirection: 'column',
              backgroundColor: 'black',
              alignItems: 'flex-end',
            }}>
            <View>
              <Text
                style={{
                  fontSize: 20,
                  textAlign: 'left',
                  color: 'white',
                  marginRight: 130,
                }}>
                {element.nomClub}
              </Text>
            </View>

            <View>
              <Text
                style={{
                  color: 'white',
                  textAlign: 'left',
                }}>
                {element.moyenneRank}
              </Text>
            </View>
          </View>
        </SafeAreaView>
      );
    });
  };

还有我的渲染

render() {
    return (
      <SafeAreaView>
        <ScrollView style={{backgroundColor: 'black'}}>
          <View style={{flex: 1}}>
            <Text style={{fontSize: 30}}>{this.renderClassement()}</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

Answer 1

这是您在代码中似乎过于复杂的东西，下面是堆栈上的一个工作示例

   this.state = {

       DATA: [{ name: "club1", points: "5" }, { name: "club2", points: "10" }, { name: "club3", points: "15" }, { name: "club4", points: "20" }],

   };

虚拟状态数据

this.state.DATA.map((element) => {

    return (

           <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', backgroundColor: 'black' }}>

              <Text style={{ fontSize: 20,textAlign: 'left', color: 'white', marginRight: 130, }}> {element.name} </Text>

              <Text style={{ color: 'white', textAlign: 'left', }}> {element.points} </Text>

           </View>

    );
})

映射数据

return (

    <SafeAreaView>

        <ScrollView style={{backgroundColor: 'black'}}>

            <View style={{flex: 1}}> {renderClassement()} </View>

        </ScrollView>

    </SafeAreaView>

 );

渲染返回

https://snack.expo.io/eYnV2f6U0

Answer 2

试试这个

renderClassement = () => {
    return this.state.sport.clubs.map((element) => {
      return (
          <View
            style={{
              flexDirection: ‘row’,
              justifyContent: 'space-between',
              alignItems: ‘center’,
              marginHorizontal: 130
            }}>
            <Text
                style={{
                  fontSize: 20,
                  color: 'white',
                }}>
                {element.nomClub}
              </Text>

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





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