我的应用程序在设备上运行缓慢是因为我使用的图像以及如何删除硬编码的宽度和高度

Posted 2023-02-22

【中文标题】我的应用程序在设备上运行缓慢是因为我使用的图像以及如何删除硬编码的宽度和高度

【英文标题】：my app runs slow on devices is it because of the images that I use and how can I remove hard-coded width and height

【发布时间】：2018-01-19 14:24:09

【问题描述】：

在我目前的代码中，我创建了一个自定义导航栏，当我在屏幕尺寸较小的手机上安装此应用程序时，我将其用作导航栏我猜这是因为我在这段代码中使用的按钮的特定宽度和高度

实际上，当我在不同屏幕尺寸的其他设备上使用它们时，按钮的整体布局和图像会发生变化

有没有什么办法可以去掉这些硬编码的尺寸，让它在任何尺寸的所有设备上都能工作

我的应用程序在设备上运行也很慢加载图像需要时间是因为这个吗？

我的 NavBar.js 文件：

import 
 View, Image, StatusBar, TouchableWithoutFeedback, Dimensions
 from 'react-native';
import React,  Component  from 'react';
import  Actions  from 'react-native-router-flux';

const w = Dimensions.get('window').width;

class NavBar extends Component 
  render() 
    return (
      <View>
      <StatusBar />
      <View
      style=
        width: w,
         position: 'absolute',
         flexDirection: 'row',
          backgroundColor: 'transparent',
          >
      <TouchableWithoutFeedback onPress=() => Actions.pop()>
      <Image
    source=require('./Images/back-arrow.png')
    style=styles.backarrowStyle />
      </TouchableWithoutFeedback>

      <Image
  source=require('./Images/help.png')
  style=styles.helpStyle />


  <Image
source=require('./Images/setting.png')
style=styles.settingStyle />
    </View>
</View>
    );
  


const styles = 
  backarrowStyle: 
    resizeMode: 'contain',
    flexDirection: 'row',
    width: 55,
    height: 55,
    left: 0,
    justifyContent: 'flex-start'
  ,
  helpStyle: 
    resizeMode: 'contain',
      width: 50,
      height: 50,
      left: 200,
      justifyContent: 'flex-end',
      position: 'relative'

  ,
  settingStyle: 
    resizeMode: 'contain',
    width: 50,
    height: 50,
    left: 210,
    justifyContent: 'flex-end',
  position: 'relative',


;


export default NavBar;

【问题讨论】：

你为什么不尝试使用百分比来表示宽度？ width: 30%

我们不能将百分比作为值传递@jude Niroshan

那么，写一个新函数来做这件事怎么样？ :D

Make view 80% width of parent in React Native的可能重复

我已经尝试过Dimensions，我也想知道为什么我的应用运行缓慢并且加载需要时间

【参考方案1】：

您可以使用 react-native 中的Dimensions 获取窗口宽度，然后从中计算所需的宽度和高度。

const buttonWidth = Dimensions.get('window').width / something

【讨论】：

我这样做了，但对于较小的设备，这仍然是同样的问题，两个按钮之一不可见

您能展示一下您用于计算尺寸的代码吗？

您正在使用窗口宽度来设置视图大小，但每个图像都从样式中获取硬编码的宽度值。相反，您可以从样式中删除宽度和高度，并直接在 Image 标签中添加计算得出的值。

【参考方案2】：

有几种方法可以做到这一点，有些方法比其他方法更容易，这完全取决于您的需要。

使用Dimensions from 'react-native'，您可以获取屏幕和窗口的高度、宽度、字体比例和比例，这将允许您确保所有内容都正确调整大小。

对于同样有效的东西，您可以尝试使用 flex 来调整导航栏的大小。例如，您使用styles 调整大小，因此您可以将width: '100%' 添加到容器视图样式（就在<StatusBar /> 之后）然后将flex:1 添加到helpstyle、backarrowstyle 和settingstyle，它们将独立占用容器内等量的空间。

【讨论】：

这不是解决方案，它完全弄乱了导航栏

我需要确切地知道它搞砸了什么。它应该只需要在正确的地方添加一些额外的样式。尝试删除每个按钮样式的宽度，这将允许 flex 完全接管按钮的宽度尺寸。另一个问题可能是您需要将 flex:1 添加到按钮的父级。

刚刚意识到您的导航栏是如何布局的。尝试从按钮样式中删除position 和justifyContent，并将flex: 7 和width: null 添加到状态栏样式以及flex: 3, width: null 到按住按钮的<View>。这应该给状态栏 70% 的容器宽度和 30% 的容器宽度给按钮。