Блог

Я пытаюсь поместить элемент в середину двух представлений, он должен выглядеть примерно так:

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

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

но это не изменится относительно ширины и высоты экрана.

кто-нибудь знает, как это сделать, чтобы зеленый вид менялся в зависимости от ширины и высоты экрана?

это то, что я получил до сих пор:

 import React, {Component} from 'react';
import {View} from 'react-native';

export default class MyLayout extends Component {
  render() {
    return (
      <View style={{
        flex: 1,
        width: 300,
        height: 500,
        alignItems: 'center',
      }}>
        <View style={{
          flex: 1,
          width: 100,
          height: 100,
          flexGrow: 1,
        }} />
        <View style={{
          flex: 1,
          width: 100,
          height: 100,
          flexGrow: 3,
        }} />
        <View style={{
          flex: 1,
          width: 100,
          height: 100,
          justifyContent: 'center',
          marginTop: 130,
          position: 'absolute',
        }} />
      </View>
    );
  }
};
  

Таким образом можно получить высоту экрана

 height: Dimensions.get('window').height
  

Конечно, не забудьте импортировать его

 import { Dimensions } from 'react-native'

  

затем вы можете задать для него относительное расстояние в соответствии с высотой
Например

 height/2