javascript - React native，当我设计图像时文本被 chop

Question

下面是我的代码，它在 View 中显示图像和文本，当我设置图像样式时，文本被 chop

   </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) * 高度

解决方法如下:

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>