WedX - журнал о программировании и компьютерных науках

Пользовательский макет заголовка для React Native

Попытка создать заголовок в react-native. Мне удалось зайти так далеко, но я хотел, чтобы заголовок был центрирован, а правильный текст был выровнен по правому краю. Есть ли простая комбинация с использованием flexbox для достижения этого?

   <View style={{marginTop: 20, backgroundColor:'yellow'}}>
       <View style={{flex: 1, flexDirection: 'row', alignItems:'center', justifyContent:'space-between', marginTop: 20, marginBottom: 20, borderColor:'red', borderWidth:1}}>
          <Text style={{ flex: 1, alignItems:'center', justifyContent:'center', borderColor:'red', borderWidth:1}}>Left with long text</Text>
          <Text style={{ flex: 1, alignItems:'center', justifyContent:'center', borderColor:'red', borderWidth:1}}>Title</Text>
          <Text style={{ flex: 1, alignItems:'center', justifyContent:'center', borderColor:'red', borderWidth:1}}>Right</Text>
       </View>
    </View>

Изображение

react-native layout flexbox
24.08.2017

  • что вы подразумеваете под «я хотел, чтобы заголовок был по центру»? 24.08.2017
  • textAlign: 'right' исправит правильный текст. Как это сейчас не по центру? 24.08.2017
  • Любое изображение того, как вы хотите, чтобы заголовок выглядел? 24.08.2017
  • Кстати, justifyContent:'center', может переопределить textAlign для 3-го элемента, поэтому в случае сохранения justifyContent сделайте его justifyContent:'flex-end', 24.08.2017

Ответы:


1

Если я правильно понимаю, что вы правильно пишете, этот код решит вашу проблему:

      <View style={{paddingTop: 20, paddingBottom: 20, backgroundColor:'yellow'}}>
        <View style={{flexDirection: 'row', alignItems:'center', borderColor:'red', borderWidth:1}}>
          <Text style={{ flex: 1, borderColor:'red', borderWidth:1}}>Left with long sd asdf text</Text>
          <Text style={{ flex: 1, borderColor:'red', borderWidth:1, textAlign: 'center'}}>Title</Text>
          <Text style={{ flex: 1, borderColor:'red', borderWidth:1, textAlign: 'right'}}>Right</Text>
        </View>
      </View>
24.08.2017

2

в этой ситуации вы можете использовать библиотеку react-native-falt-header. эта библиотека поддерживает все ваши потребности в обработчиках центрального, левого и правого текста и кнопок.

https://www.npmjs.com/package/react-native-flat-header

пример:

<FlatHeader
    leftIcon={<Icon name="arrow-left" size={30} color="#FFF" />}
    leftText="back"
    leftContentHandler={() => {
        console.warn('Left both icon and text pressed');
    }}
    centerContent={
        <Group>
            <Icon name="comment" size={30} color="#FFF" />
            <Text style={{ color: '#FFF', paddingHorizontal: 5 }}>FAQ</Text>
        </Group>
    }
    rightIcon={<Icon name="star" size={30} color="#FFF" />}
    style={{ marginTop: 20, backgroundColor:'yellow' }}
    />

04.04.2019
  • Вероятно, вам следует сообщить, что вы владеете/управляете этой библиотекой. 10.06.2019
    • Новые материалы
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Для любых предложений по сайту: [email protected]