Блог

Главная - Вопросы по программированию - Как создать ранг с помощью flexbox и page controlview

Как создать ранг с помощью flexbox и page controlview

#react-native #flexbox #rank

#react-native #flexbox #ранг

Вопрос:

Я пытаюсь поместить имя слева, а ранг справа. Я попробовал строку 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>
    );
  }
}

Ответ №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>

Комментарии:

1. Удалить тег представления с помощью style={{ flex: 1, }}

Ответ №2:

Вы должны попробовать приведенный ниже фрагмент в своей функции ранжирования.

 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>