css - 在 native react 中放置没有绝对位置的 View

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 中。

    <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

是的，如果您想根据设备屏幕尺寸获得自适应 View ，那应该是主要解决方案。我会建议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>

Ups...我误解了这个问题...我认为您可以为这个问题使用 aspectratio 属性。你可以给它一个百分比，在这个例子中，高度为空，纵横比为 1，它应该呈现一个正方形。但是我仍然建议使用宽度 null 和 flex:1/3 或 flex 1/4 。 IDK，尝试一下。我不知道下面这个例子是否有效，这是我想到的第一件事。

 <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>