React Native Layout - Flexbox с адаптивными изображениями - PullRequest
Новая
       74

React Native Layout - Flexbox с адаптивными изображениями

0 голосов
/ 24 мая 2018

Я бы хотел создать макет с помощью Flexbox в React Native.Идея состоит в том, чтобы иметь адаптивное изображение с текстом под ним, вертикально по центру страницы.

Похоже, проблема заключается в том, что представление, содержащее изображение, либо исчезает, так как изображение не имеет высоты, либо заполняет всю высоту экрана, и толкает текст, который должен находиться ниже изображения, вниз.

Я предполагаю, что это связано с неопределенностью размеров изображения, чтобы заставить его действовать адаптивно и заполнить родительский контейнер.

Вот макет макета

Обновление

Спасибо Topik Mujianto - я действительно следовал этому самому уроку!

Вот мой код: 

const styles = StyleSheet.create({
  pageContainer: {
    flex: 1,
    flexDirection:'row', 
    justifyContent:'center',
    backgroundColor: "blue",
    alignItems: 'flex-start'
  },
  columnStyle: {
    flex: 0.7,
    flexDirection:'column', 
    backgroundColor: "red",
    borderWidth: 1,
    alignItems: 'flex-start'
  },

  imgStyle: {
    flex: 1,
    height: undefined,
    width: undefined,
    alignSelf: 'stretch',
  }
})

const Component = props => (
  <View style={styles.pageContainer}>
    <View style={styles.columnStyle}>
      <Image 
      style={styles.imgStyle}
      resizeMode="contain" 
      source={require('../../../assets/images/onboarding-how-it-works.png')}
      />
    </View>
  </View>
);

Что дает это:

По центру на странице

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

  imgStyle: {
    flex: 1,
    height: undefined,
    width: undefined,
    alignSelf: 'felx-start',
  }

Я получаю это (изображение исчезло):

Нет изображения

ПослеНемного больше исследования. Я вижу, что на самом деле изображение растягивается, чтобы соответствовать свойству flex: 1.Я установил желтый цвет фона на изображение и получил следующее:

Фон изображения показывает размер окна изображения

Итак, вопрос в том, как мне получить изображениебыть отзывчивым, если его контейнер не растягивается до родительского и не сжимается, чтобы соответствовать содержанию адаптивного изображения, а затем выровнять его по верху?

...