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

是的，如果您希望根据设备屏幕的尺寸获得适应性视图，那应该是主要解决方案。我建议使用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属性。您可以在此示例中为其指定一个百分比，高度为null，纵横比为1，它应该呈现一个正方形。但是我仍然建议使用width 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>

Answer 2

From the docs RN中的尺寸是无单位的，并且表示与密度无关的像素。它应该看起来像这样。

=IF(COLUMN(A:A)<$V2,X2+30,"")

在无反应的原生视图中放置没有绝对位置的视图

2 个答案: