- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用react-native 开发一个项目,在该项目中我很难理解 props 在功能组件之间的工作原理。我的要求是创建一个可重用的按钮组件,我可以在其中传递项目内资源文件中的图像位置,这样它就会为我创建按钮。由于某种原因,如果我手动给出所需的位置,它将起作用并为我创建按钮,但是如果我\我将位置作为我创建的位置的 Prop 传递,则由于某种原因它将无法工作。我的代码如下。
按钮组件
import React, { Component } from 'react';
import {
View,
StyleSheet,
Image,
TouchableOpacity
} from 'react-native';
const ButtonWithImage = (props) => {
const {buttonStyle} = styles;
const clickEvent = () => {}
return (
<TouchableOpacity onPress= {clickEvent}style={buttonStyle}>
<Image
source={props.imagePath}
style={styles.ImageIconStyle}
/>
</TouchableOpacity>
);
};
const styles = {
buttonStyle: {
//alignSelf:'stretch',
height: 50,
width:50,
paddingTop:0,
flexDirection: 'row'
}
};
export default ButtonWithImage;
我创建按钮并传递 Prop 的位置
import React, { Component } from 'react';
import {
View,
StyleSheet,
Dimensions,
} from 'react-native';
import FooterIcons from './ButtonWithImage'
const Footer = () => {
return (
<View style={styles.footerStyle}>
<FooterIcons imagePath = {'./images/homeButton/homeBtn.png'} />
</View>
);
};
const styles = StyleSheet.create({
footerStyle: {
height: 60,
width: 100,
// justifyContent:'flex-start'
},
});
export default Footer;
最佳答案
这是不可能的,因为您需要具有本地路径的图像 <Image source={require(props.path)} />
这不起作用,因为 require 只能将字符串文字作为参数。
这意味着您必须执行以下操作:
<FooterIcons imagePath = {require('./images/homeButton/homeBtn.png')}
/>
为了让它发挥作用。并且不要忘记为您的图像指定宽度和高度。
或
您可以采用适合没有大量图像的应用程序的方式来完成此操作,因为我们将预加载它们:
1- 创建一个 Assets javascript 文件 asset.js ,该文件应该需要您的所有本地镜像,如下所示:
const assetsObject = {
homeIcon: require('./images/homeButton/homeBtn.png')
boatIcon: require('./images/homeButton/boat.png')
....
...
}
module.exports = assetsObject
2- 现在您需要在 ButtonWithImage.js 文件中引用此文件
const assets = require('./assets.js')
const ButtonWithImage = (props) => {
const {buttonStyle} = styles;
const clickEvent = () => {}
return (
<TouchableOpacity onPress= {clickEvent}style={buttonStyle}>
<Image
source={assets[props.imagePath]}
style={styles.ImageIconStyle}
/>
</TouchableOpacity>
);
};
3-您发送到 ButtonWithImage 的 props 应该位于我们创建的 assetObject 的键 'homeIcon'
上或'boatIcon'
..等等
const Footer = () => {
return (
<View style={styles.footerStyle}>
<FooterIcons imagePath = {'homeIcon'} />
</View>
);
};
4-不要忘记为图像指定宽度和高度
就是这样,我建议不要再调用 prop imagePath,也许只是图像。
关于reactjs - 将本地镜像路径作为两个功能组件之间的 prop 传递,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48385073/
我需要将 OCI 镜像 list 转换为 Docker v2.2 镜像格式,反之亦然。但我找不到两者之间的任何区别,是否有任何实际区别或它们相同? 最佳答案 Docker 镜像 list V 2,模式
LNMP 是代表 Linux 系统下的 Nginx、Mariadb、PHP 相结合而构建成的动态网站服务器架构。下面使用docker制作分布式lnmp 镜像。 1、docker 分布式 lnmp
你好,我创建了一个基础镜像;但是,每当我运行 docker build . 时,我都看不到成功构建 我的 docker 文件 FROM centos:7 ARG user=john ARG home=
我想要我的 iPhone 应用程序中有一个功能,可以将图像转换为类似镜像的方式。 就像如果有一个左手举起的人的图像,那么转换后的图像必须有右手举起的同一个人。 任何代码或链接将不胜感激 预先感谢您的帮
我们希望将一个Elasticsearch集群放置在kubernetes集群的顶部(当前有2个节点,但是我们计划增加它)。 是否可以通过使集群中的每个节点包含相同数据的方式配置elasticsearch
我试图了解 docker 如何在文件系统上存储图像和图层。构建图像时,图层出现在 /var/lib/docker/image/overlay2/layerdb 中,图像出现在 /var/lib/doc
所以我最近开始使用 docker,因为我认为让我的网站 dockerised 会很好。我有一个 super 简单的 docker-compose.yml 文件,其中仅包含 wordpress:late
我有一个 docker 镜像,叫它 dockerimage/test。每次我更新它时,我都会增加一个标签,所以 dockerimage/test:1、dockerimage/test:2 等等。 当我
我开始使用 Docker,我发现我可以将主图像存储库放在不同的磁盘上(符号链接(symbolic link)/var/lib/docker 到其他位置)。 但是,现在我想看看是否有办法将它拆分到多个磁
显然应用程序打包和部署似乎有两种做法 创建 Docker 镜像并部署它 从头开始构建和部署应用程序。 我对如何使用选项 1) 感到困惑。前提是你获取一个 docker 镜像并在任何平台上重复使用它。但
我有一个 UIView具有透明背景和一些按钮。我想捕获 View 的绘图,将其缩小,然后在屏幕上的其他位置重新绘制(镜像)它。 (在另一个 View 之上。)按钮可以更改,因此它不是静态的。 最好的方
我正在为一个项目编写测试,我想测试和验证一个 docker 镜像构建。但我不想推送图像。 我希望图像构建在 CI(如 taskcluster)上并运行测试。 最佳答案 您需要使用 taskcluste
我想复制每个 html 页面中的代码,同时添加一些更改: 例子: Any text (even if includes :., 输出: Any text (even if includes :.,
我使用三星 ARM Cortex A9 Exynos4412 板。我在板上启动“linux + Qt”img。但是板上没有包管理器,也没有 make 、 gcc 命令。在/bin 文件中有文件 Bus
是否有可能以某种方式设置一个 git 存储库,该存储库像通常的 --mirror 一样用于 pull 入它,但在将从推送到另一个存储库时没有强制? 最佳答案 您可以像这样添加 --no-force 来
背景 最近在巡检过程中,发现harbor存储空间使用率已经达到了80%。于是,去看了一下各项目下的镜像标签数。发现有个别项目下的镜像标签数竟然有好几百个。细问之下得知,该项目目前处于调试阶段
以下均在centos 7进行的操作 docker安装 ? 1
我知道如何删除 N 天前创建的旧 Docker 镜像。 See here 但我真正想做的是删除过去 N 天未使用的旧 Docker 镜像。 目标是保留经常使用的图像,即使在我进行清理时没有容器实际使用
我有一个自定义的 docker 镜像,已经构建好了。没有可用的 Dockerfile。在容器内部,可以使用自定义用户,而不是 root,比如 test。此用户已附加到组 test。这是容器的默认用户。
我有一个开发数据库,我想将其提交到 docker 镜像中,然后推送到私有(private)存储库并用于本地开发和 CI 构建。 数据库保存为SQL备份,我可以通过将备份文件映射到官方镜像的/doc
我是一名优秀的程序员,十分优秀!