reactjs - 如何将图像添加到 react-native-layout-grid?Github 仓库中没有专门提到的 props
问题描述
我正在使用 react-native-layout-grid 包来显示网格布局。我想在网格布局中添加图像而不是文本/字符串。我该怎么做?
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
} from 'react-native';
import GridLayout from 'react-native-layout-grid';
export default class App extends Component<{}> {
renderGridItem = (item) => (
<View style={styles.item}>
<View style={styles.flex} />
<Text style={styles.name}>
{item.name}
</Text>
</View>
);
render() {
const items = [];
for (let x = 1; x <= 30; x++) {
items.push({
name: `Grid ${x}`
});
}
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Grid Layout
</Text>
<View style={styles.flex}>
<GridLayout
items={items}
itemsPerRow={3}
renderItem={this.renderGridItem}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
///styles///
});
我需要添加图像而不是传递给道具的字符串文本。有什么办法吗?提前致谢。
解决方案
在 renderGridItem 添加图像例如:---
renderGridItem = (item) => (
<View style={styles.item}>
<View style={styles.flex} />
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>
<Text style={styles.name}>
{item.name}
</Text>
</View>
);
推荐阅读
- python - 类错误:TypeError:Veicolo() 没有参数
- angular - 为什么 ng new app 安装了早于 12 的版本(现在是最新的)
- c# - 从 .net 5 web api 引用 .net 框架 dll 无法加载类型 System.Web.HttpContext
- c# - 如何在 LUCENE.NET 中编写连接查询?
- r - 我如何在 NTplot 中画一条线,我可以使用 ablines 吗?
- c++ - 学校作业遇到问题 c++ 时间计算器
- python - 拆分行以在 Pandas Dataframe 中创建具有相同其他行值的新行
- testing - 如何在空手道 UI 自动化框架中截取屏幕截图并将其保存为当前日期和时间
- python - 如何在 Pandas 中读取分号分隔的文件并进行规范化
- node.js - 从 Cube js 连接到 SQL Server 数据库时登录失败