反应原生，当我设置图像样式时文本被截断

Posted 2023-02-22

【中文标题】反应原生，当我设置图像样式时文本被截断

【英文标题】：React native , text getting cut off when i style image

【发布时间】：2019-04-17 00:50:27

【问题描述】：

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

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

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

【问题讨论】：

可以提供截图吗？

对不起，但看起来图像已调整到给定的宽度和高度，但文本被剪掉了。这只发生在我为图像指定高度和宽度时。

你有</ScrollView>开头（注：/）

***.com/questions/36284453/…。你想要这样的东西吗？

【参考方案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>