Размещение вида без абсолютной позиции в реакции

Question

Я создаю это приложение, проблема с макетом заключается в том, что оно изначально было создано для браузеров (HTML), и сейчас я занимаюсь преобразованием кода в JSX.На скриншоте ниже вы можете видеть, что я пытаюсь разместить прокручиваемую область рядом с зеленым изображением.

<div class="image-link">
<img src="images/green-link01.png" srcset="images/green-link01-2x.png" 
alt="image description" width="713" height="1084" usemap="#green- 
link01">
<map name="green-link01">
<area target="" alt="" title="" href="#" 
coords="7,1,1422,3,1423,742,432,744,430,2164,-1,2160" shape="poly">
</map>

Результат выглядит хорошо на этом экране, но на других устройствах он просто не рендерится, очевидно, изменение ширины чертовски белого контейнера, я установилширина до 90%.Если я использую фиксированную ширину, она станет слишком большой или слишком маленькой в ​​зависимости от размера экрана.

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

    <View style={styles.floorHolder}>
        <View style={styles.containerBox}>
            <Image 
                source={require("../assets/green-link01-2x.png")}
                style={{ height: "100%", width: "100%", resizeMode: "contain", backgroundColor: 'white' }}
            />

            <ScrollView
                style={{
                    width: "67%",
                    height: "46%",
                    position: "absolute",
                    top: "40%",
                    bottom: '0%',
                    left: "33%",
                    right: '0%',
                    backgroundColor: "#f3ebd5",
                }}
            >
                    <Text>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                    enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                    in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                    nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                    sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </Text>
            </ScrollView>
        </View>
    </View>

Не уверен, что это лучшее решение, приветствуется любое предложение.

Answer 1

Из документов Размеры в RN безразмерны и представляют независимые от плотности пиксели.Это должно выглядеть так.

      <Image 
        source={require("../assets/green-link01-2x.png")}
        style={{ height: 100, width: 100, resizeMode: "contain", backgroundColor: 'white' }}
        />

        <ScrollView
            style={{
                width: 67,
                height: 46,
                position: "absolute",
                top: 40,
                bottom: 0,
                left: 33,
                right: 0,
                backgroundColor: "#f3ebd5",
            }}
        >

Answer 2

Да, это должно быть основным решением, если вы хотите иметь адаптивный вид в зависимости от размера экрана устройства.Я бы предложил usgin flex (если вы хотите, чтобы размер адаптировался к экрану)

<View style={{flex:1}}>
  <View style={{flex:1,flexDirection: 'row'}}>
   <View style={{flex:1,backgroundColor:'green'}}/>
   <View style={{flex:2,backgroundColor:'green'}}/>
  </View>
  <View style={{flex:2,backgroundColor:'green',flexDirection: 'row'}}>
   <View style={{flex:1,backgroundColor:'green'}}/>
   <View style={{flex:2,backgroundColor:'gray'}}/>
  </View>
</View>

Упс ... Я не понял вопроса ... Я думаю, вы можете использовать свойство аспектации для этого.в этом примере вы можете задать процент с высотой ноль и аспектным отношением 1, он должен отображать квадрат.Тем не менее, я по-прежнему рекомендую использовать ширину null и flex: 1/3 или flex 1/4.ИДК, поэкспериментируй с этим.Я не знаю, работает ли приведенный ниже пример, это первое, что приходит мне в голову.

 <View style={styles.floorHolder}>
        <View style={styles.containerBox}>
            <Image 
                source={require("../assets/green-link01-2x.png")}
                style={{ height: "100%", width: "100%", resizeMode: "contain", backgroundColor: 'white' }}
            />

            <ScrollView
                style={{
                    width: "67%",
                    height: null,
                    position: "absolute",
                    left: "0",
                    right: '0',
                    backgroundColor: "#f3ebd5",
                    aspectRatio: 1
                }}
            >
                    <Text>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                    enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                    in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                    nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                    sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </Text>
            </ScrollView>
        </View>
    </View>