return (
<Card>
<CardHeader
title="Full Name"
subtitle="@username"
avatar="./../assets/img/image.gif" />
<CardText expandable>
<div>
<p>{message}</p>
</div>
<div>
{tagElements}
</div>
</CardText>
</Card>
);
};
文件夹结构:
- app
-- assets
--- img
---- image.gif
-- src
我是否需要在每个要显示图像的js文件中导入某些内容?为什么我不能指向它所在的文件夹并显示它?我错过了什么?
答案 0 :(得分:1)
在CardHeader组件中,您需要从react native导入Image组件,并将uri prop提供给要呈现的组件。这是documentation for image
<Image
style={{width: 50, height: 50}}
source={{uri: props.avatar}} />
本地反应的一个问题是,您需要为图像提供明确的宽度和高度,以便渲染。否则它显示为0x0。
所以CardHeader中的这样的东西会起作用:
In [25]: df = pd.DataFrame({'col1': ['SPAN 10300 or 20300', 'SPAN 10300 or 20301', 'MOGK 10100/30100', 'PHSC 12600 must be taken before PHSC 12620']})
In [26]: df.index = ['a', 'b', 'c', 'd']
In [27]: df
Out[27]:
col1
a SPAN 10300 or 20300
b SPAN 10300 or 20301
c MOGK 10100/30100
d PHSC 12600 must be taken before PHSC 12620
In [28]: df.col1.str.extract('(([A-Z]{4}\s*\d{5}?)|(\d{5}?)).*?(and|\-|or|\, or|\:|\/|\.|\;|\(|\s?)')
/usr/local/bin/ipython:1: FutureWarning: currently extract(expand=None) means expand=False (return Index/Series/DataFrame) but in a future version of pandas this will be changed to expand=True (return DataFrame)
#!/usr/local/bin/python3.5
Out[28]:
0 1 2 3
a SPAN 10300 SPAN 10300 NaN
b SPAN 10300 SPAN 10300 NaN
c MOGK 10100 MOGK 10100 NaN /
d PHSC 12600 PHSC 12600 NaN
In [29]: df.col1.str.extractall('(([A-Z]{4}\s*\d{5}?)|(\d{5}?)).*?(and|\-|or|\, or|\:|\/|\.|\;|\(|\s?)')
Out[29]:
0 1 2 3
match
a 0 SPAN 10300 SPAN 10300 NaN
1 20300 NaN 20300 NaN
b 0 SPAN 10300 SPAN 10300 NaN
1 20301 NaN 20301 NaN
c 0 MOGK 10100 MOGK 10100 NaN /
1 30100 NaN 30100 NaN
d 0 PHSC 12600 PHSC 12600 NaN
1 PHSC 12620 PHSC 12620 NaN NaN
答案 1 :(得分:0)
您必须导入图像,然后使用它。在您的js文件标题中添加图像路径就足够了。示例:
import myimage from 'XXX/images/x.png';
然后您必须像这样显示它:
<div className="myimage">
<img src={myimage} />
</div>
让我知道它是否适合您。