Question

下面是我的代码，该代码在视图中显示图像和文本，当我设置图像样式时，文本会被剪掉

   </ScrollView>
        <View style={{ flex: 1 }}>
      <Image
        source={require("../../assets/bannerImages/1.jpg")}
        resizeMode={"center"}
        style={{ height: "30%", width: "100%" }}
      />
      <Text style={{ flex: 1 }}>
        1Aawaz is a one step solution for all. Not only popular instruments
        2like Guitar, Keyboard, Drums but also we provide training for rare
        3Aawaz is a one step solution for all. Not only popular instruments
        4like Guitar, Keyboard, Drums but also we provide training for rare
        5Aawaz is a one step solution for all. Not only popular instruments
        like Guitar, Keyboard, Drums but also we provide training for rare
        Aawaz is a one step solution for all. Not only popular instruments
        like Guitar, Keyboard, Drums but also we provide training for rare
        like Guitar, Keyboard, Drums but also we provide training for rare
        Aawaz is a one step solution for all. Not only popular instruments
        like Guitar, Keyboard, Drums but also we pr like Guitar, Keyboard,
        9Drums but also we provide training for rare Aawaz is a one step
        10solution for all. Not only popular instruments like Guitar,
        Keyboard, 13Drums but also we pr Ads
      </Text>
    </View>
  </ScrollView>

我想要的是在图像下方显示文本，并且还可以为图像提供宽度和高度。在样式图像之前，一切正常，并且不会剪切文本。

Answer 1

此问题仅在Android上存在，并且您的代码在iOS上运行正常。尝试将图像的高度设置为屏幕高度的30％时，会受到图像样式的影响。

style={{ height: "30%", width: "100%" }}

图像的高度已正确计算，但未添加到ScrollView的总高度中。仅当使用百分比设置图像高度时才会出现此问题，使用数字值时效果很好。解决问题的一种方法是使用React-Native的 Dimensions

首先，我们需要获取屏幕高度const { height } = Dimensions.get('window')，然后计算屏幕的30％来设置图像高度const imageHeight = (30 / 100) * height

这是解决方案：

import React from 'react';
import { Text, View, ScrollView, Image, Dimensions } from 'react-native';

const { height } = Dimensions.get('window');
const imageHeight = (30 / 100) * height; // calculates 30% of the screen

<ScrollView>
    <View style={{ flex: 1 }}>
        <Image
            source={require("../../assets/bannerImages/1.jpg")}
            resizeMode={"center"}
            style={{ height: imageHeight, width: "100%" }}
        />
        <Text style={{ flex: 1 }}>
            1Aawaz is a one step solution for all. Not only popular instruments
            2like Guitar, Keyboard, Drums but also we provide training for rare
            3Aawaz is a one step solution for all. Not only popular instruments
            4like Guitar, Keyboard, Drums but also we provide training for rare
            5Aawaz is a one step solution for all. Not only popular instruments
            like Guitar, Keyboard, Drums but also we provide training for rare
            Aawaz is a one step solution for all. Not only popular instruments
            like Guitar, Keyboard, Drums but also we provide training for rare
            like Guitar, Keyboard, Drums but also we provide training for rare
            Aawaz is a one step solution for all. Not only popular instruments
            like Guitar, Keyboard, Drums but also we pr like Guitar, Keyboard,
            9Drums but also we provide training for rare Aawaz is a one step
            10solution for all. Not only popular instruments like Guitar,
            Keyboard, 13Drums but also we pr Ads
        </Text>
    </View>
</ScrollView>

当我设置图片样式时，会做出反应，导致本机文本被截断

1 个答案: