React Native中,在我为图片设置样式时,文本被截断。

22 浏览
0 Comments

React Native中,在我为图片设置样式时,文本被截断。

下面是我的代码,它显示了图像和视图内的文本。当我样式化图像时,文本被截断了。

   
        
      
      
        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
      
    
  

我想显示图像下方的文本,并且还能够为图像指定宽度和高度。在样式化图像之前,一切都正常,文本未被剪切。

admin 更改状态以发布 2023年5月24日
0
0 Comments

这个问题只出现在 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

    
        
        
            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
        
    

0