TouchableOpacity ломает стиль

Question

Я пытаюсь создать навигацию в React Native. Я сделал пользовательский компонент, который состоит из изображения и текста. Перед применением TouchableOpacity укладка работает нормально. Но после того, как я применил его к одному из компонентов, это произошло.

Весь код можно найти здесь, готовый к запуску .

Мне бы хотелось, чтобы названия компонентов MojQR не деформировались, а оставались такими же, как и все остальные. В настоящее время, как видно из кода, TouchableOpacity является только , примененным к MojQR

Answer 1

У вас проблема со стилем, который вы используете. Когда вы устанавливаете размеры (ширина, высота) в процентах, он будет брать процент от компонента, который его оборачивает. Вот почему, когда вы добавили TouchableOpacity, это испортило все стили. У вас есть 2 варианта, изменить используемый шаблон стиля или внести простое изменение, которое может динамически изменить width с MenuItem, например так:

//App.js

<TouchableOpacity style={styles.touchableContainer} onPress={() => navigation.navigate('Details')}>
  <MenuItem itemImage={require('./app/img/QR_code_for_mobile_English_Wikipedia.svg.png')} children='Moj QR' isWrapped={true} />
</TouchableOpacity>
...

//And the styling inside your style object
  touchableContainer: {
    width: '50%'
  }

В приведенном выше коде вы добавляете эту опору который будет использоваться для изменения стилей в

//MenuItem.js
//change the wrapper for this one:
<View style={this.props.isWrapped ? {...styles.menuItem, width: '100%'} : styles.menuItem}>
...

//And add the flexGrow property to your styles.menuItem
    menuItem: {
        width: '50%',
        height: '33.3333%',
        padding: 10,
        flexGrow: 1,
    },