反应自然，当我设计图像时，文本被切断

Question

下面是我的代码，它在视图中显示图像和文本，文本被截断为i样式图像

   </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%" }}

图像的高度计算正确，但没有添加到< code>ScrollView的总高度中。该问题仅在使用百分比设置图像高度时出现，在使用数值时工作正常。解决这个问题的一个方法是使用React-Native的维度

首先，我们需要获得屏幕高度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>