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

Javascript 我的应用程序在设备上运行缓慢是因为我使用的图像,以及如何删除硬编码的宽度和高度,javascript,reactjs,react-native,Javascript,Reactjs,React Native,在我目前的代码中,我创建了一个自定义导航栏,当我在屏幕较小的手机上安装此应用程序时,我使用它作为导航栏。屏幕右端出现的按钮未显示,我猜这是因为我在代码中使用的按钮的特定宽度和高度 实际上,当我在不同屏幕尺寸的其他设备上使用按钮和图像时,按钮和图像的整体布局都会发生变化 有没有办法去掉这些硬编码的尺寸,让它在任何尺寸的设备上都能工作 我的应用程序在设备上运行缓慢加载图像需要时间是因为这个吗 我的NavBar.js文件: 导入{ 视图、图像、状态栏、无反馈触摸屏、尺寸 }从“反应本机”; 从“Re

在我目前的代码中,我创建了一个自定义导航栏,当我在屏幕较小的手机上安装此应用程序时,我使用它作为导航栏。屏幕右端出现的按钮未显示,我猜这是因为我在代码中使用的按钮的特定宽度和高度

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

有没有办法去掉这些硬编码的尺寸,让它在任何尺寸的设备上都能工作

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

我的NavBar.js文件:

导入{
视图、图像、状态栏、无反馈触摸屏、尺寸
}从“反应本机”;
从“React”导入React,{Component};
从“react native router flux”导入{Actions};
const w=维度.get('window')。宽度;
类导航栏扩展组件{
render(){
返回(
Actions.pop()}>
);
}
}
常量样式={
背面箭头样式:{
resizeMode:'包含',
flexDirection:'行',
宽度:55,
身高:55,
左:0,,
justifyContent:“灵活启动”
},
帮助样式:{
resizeMode:'包含',
宽度:50,
身高:50,
左:200,,
justifyContent:“柔性端”,
位置:'相对'
},
设置样式:{
resizeMode:'包含',
宽度:50,
身高:50,
左:210,
justifyContent:“柔性端”,
位置:'相对',
}
};

导出默认导航栏您可以使用react native中的
维度
来获得窗口宽度,然后从中计算所需的宽度和高度

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

您可以使用react native中的
维度
来获取窗口宽度,然后从中计算所需的宽度和高度

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

有几种方法可以做到这一点,有些方法比其他方法简单,这取决于你需要什么

使用“react native”中的
尺寸
可以获取屏幕和窗口的高度、宽度、字体比例和比例,从而确保所有内容的大小都正确调整


对于同样有效的东西,您可以尝试使用flex调整导航栏的大小。例如,您在调整大小时使用了
样式
,因此您可以将
宽度:“100%”
添加到容器视图样式(就在
之后),然后将
flex:1
添加到
帮助样式
backarrowstyle
settingstyle
它们将独立地在容器中占据相等的空间。

有几种方法可以做到这一点,有些方法比其他方法更简单,这完全取决于您需要什么

使用“react native”中的
尺寸
可以获取屏幕和窗口的高度、宽度、字体比例和比例,从而确保所有内容的大小都正确调整



对于同样有效的东西,您可以尝试使用flex调整导航栏的大小。例如,您在调整大小时使用了
样式
,因此您可以将
宽度:“100%”
添加到容器视图样式(就在
之后),然后将
flex:1
添加到
帮助样式
backarrowstyle
settingstyle
,它们将独立地在容器内占据相等的空间。

为什么不尝试使用百分比作为宽度<代码>宽度:30%
我们不能将百分比作为值传递@jude Niroshansen,编写一个新函数来实现这一点怎么样D可能重复我尝试过维度,我还想知道为什么我的应用程序运行缓慢并且需要时间加载为什么不尝试使用宽度的百分比<代码>宽度:30%我们不能将百分比作为值传递@jude Niroshansen,编写一个新函数来实现这一点怎么样D可能重复我尝试过尺寸,我也想知道为什么我的应用程序运行缓慢并且需要时间加载我这样做了,但对于较小的设备来说仍然是相同的问题两个按钮之一不可见您可以显示代码youbuse来计算尺寸吗?您正在使用窗口宽度来设置视图尺寸,但是,每个图像都从样式中获得一个硬编码的宽度值。相反,您可以从样式中删除宽度和高度,并直接在图像标记中添加一个计算值。我这样做了,但对于较小的设备,这仍然是相同的问题。两个按钮中的一个不可见。您可以显示代码youbuse来计算大小吗?您使用窗口宽度来设置视图大小,但是,每个图像都从样式中获得一个硬编码的宽度值。相反,你可以从样式中删除宽度和高度,直接在图像标签中添加一个计算值。这不是解决方案,它会完全弄乱导航栏。我需要确切地知道它弄乱了什么。它应该只需要在正确的位置使用一些额外的样式。尝试删除每个按钮样式的宽度,这将允许flex完全接管按钮的宽度尺寸。另一个问题可能是,您需要将flex:1添加到按钮的父级。刚刚意识到导航栏的布局。尝试从按钮样式中删除
position
justifyingcontent
,并将
flex:7
width:null
添加到按住按钮的状态栏样式旁边的
flex:3,width:null
。这应该给状态栏70%的容器宽度和30%的容器宽度的按钮。这不是解决方案,它完全弄乱了导航栏。我需要确切地知道它弄乱了什么。它应该只需要在正确的位置使用一些额外的样式。尝试删除每个按钮样式的宽度,这将允许flex完全接管按钮的宽度尺寸。另一个问题可能是您需要将flex:1添加到