如何使用 flexbox 和页面 controllview 设计排名答案

【问题标题】：How to design a rank with flexbox and page controllview如何使用 flexbox 和页面 controllview 设计排名
【发布时间】：2020-10-27 23:13:09
【问题描述】：

我试图把名字放在左边，把等级放在右边。我尝试了 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>
      );
    });
  };

还有我的渲染

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>
    );
  }
}

【问题讨论】：

标签： react-native flexbox rank

【解决方案1】：

试试这个方法

<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>

【讨论】：

移除带有 style={{ flex: 1, }} 的 View 标签

【解决方案2】：

您应该在 renderRanking 函数中尝试以下 sn-p。

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>
      );
    });
  };

也改变

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

到

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

【讨论】：