时间戳

首页 > 解决方案 > 如何使用 flexbox 设计排名？

javascript - 如何使用 flexbox 设计排名？

问题描述

我正在努力把名字俱乐部放在左边，把他的等级放在右边。

有人可以帮我吗？

我正在尝试使用 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>
    );
  }
}

标签： javascriptreact-nativeflexbox

解决方案

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

   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

推荐阅读