arrays - React Native:平面列表和数组
问题描述
这肯定是一个常见问题,但我无法使用数组源渲染 FlatList。
我按照这个例子:https ://medium.com/javascript-in-plain-english/how-to-loop-through-arrays-in-react-3eaa8a14445
该示例以:
let shoppingCart = [
{id: 35, item: 'jumper', color: 'red', size: 'medium', price: 20},
{id: 42, item: 'shirt', color: 'blue', size: 'medium', price: 15},
{id: 71, item: 'socks', color: 'black', size: 'all', price: 5},
]
这就是我在工作中实际填充数组的方式。
然后,我按照说明进行了安排:
this.items = this.shoppingCart.map((item, key) =>
<View key={item.id}/> <Text>{item.name}</Text></View>
);
最后,我将项目设置为 FlatList 的来源:
render(){
return (
<FlatList style = {{flex : 1}}
data={this.items}
keyExtractor={(item, index) => index}
renderItem={({ item })=> {
return item; }
}/>
)
}
我不明白为什么我有一个空白屏幕......我尝试应用不同的样式,但它什么也没显示。
编辑
所以,我只是尝试了另一个例子:
render(){
let shoppingCart = [
{id: 35, item: 'jumper', color: 'red', size: 'medium', price: 20},
{id: 42, item: 'shirt', color: 'blue', size: 'medium', price: 15},
{id: 71, item: 'socks', color: 'black', size: 'all', price: 5},
]
const _renderItem = ({item}) => <Text>{item.color}</Text>
return (
<View style = {{background = '#444',flex : 1}}>
<FlatList
data = {shoppingCart}
renderItem = {_renderItem}/>
</View>
)
}
现在我有一个空白屏幕,上面有关于 index.js 的警告,即使我重置了缓存......
这很令人不安,我在业务逻辑和复杂计算上做了巨大的工作,但我无法呈现一个简单的列表......
有人可以在这一点上帮助我吗?
编辑
我无法解释,现在,我收到了这条消息:
Looking for JS files in
D:\Projects\VSCode\projekt\node_modules\react-native\scripts
Loading dependency graph, done.
::ffff:127.0.0.1 - - [26/Mar/2019:01:30:19 +0000] "GET /launch-js- devtools HTTP/1.1" 200 - "-" "okhttp/3.12.1"
Error: Unable to resolve module `./index` from `D:\Projects\VSCode\projekt\node_modules\react-native\scripts/.`: The module `./index` could not be found from `D:\Projects\VSCode\projekt\node_modules\react-native\scripts/.`. Indeed, none of these files exist:
* `D:\Projects\VSCode\projekt\node_modules\react-native\scripts\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
* `D:\Projects\VSCode\projekt\node_modules\react-native\scripts\index\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
at ModuleResolver.resolveDependency (D:\Projects\VSCode\projekt\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:163:15)
at ResolutionRequest.resolveDependency (D:\Projects\VSCode\projekt\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (D:\Projects\VSCode\projekt\node_modules\metro\src\node-haste\DependencyGraph.js:283:16)
at D:\Projects\VSCode\projekt\node_modules\metro\src\lib\transformHelpers.js:261:42
at Server.<anonymous> (D:\Projects\VSCode\projekt\node_modules\metro\src\Server.js:1038:41)
at Generator.next (<anonymous>)
at asyncGeneratorStep (D:\Projects\VSCode\projekt\node_modules\metro\src\Server.js:99:24)
at _next (D:\Projects\VSCode\projekt\node_modules\metro\src\Server.js:119:9)
::1 - - [26/Mar/2019:01:30:20 +0000] "GET /index.delta?platform=android&dev=true&minify=false&revisionId=291a9787399f7066 HTTP/1.1" 500 - "http://localhost:8081/debugger-ui/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36"
::ffff:127.0.0.1 - - [26/Mar/2019:01:30:29 +0000] "GET /onchange HTTP/1.1" - - "-" "okhttp/3.12.1"
::ffff:127.0.0.1 - - [26/Mar/2019:01:30:44 +0000] "GET /onchange HTTP/1.1" - - "-" "okhttp/3.12.1"
::ffff:127.0.0.1 - - [26/Mar/2019:01:30:59 +0000] "GET /onchange HTTP/1.1" - - "-" "okhttp/3.12.1"
为什么一个简单的 FlatList 会引起这么多问题?再次,我尽我所能:重置缓存、删除 noe_modules、npm install、npm 链接......但是......没有任何效果......
编辑
抱歉问了很长的问题,但我的上帝,React Native 和我的前妻很相似:每个月有 10 分钟的快乐,其余时间是痛苦和问题……我现在处于一个循环中:我解决了 index.js 问题,然后出现其他问题:Cannot find module '@babel/runtime/helpers/builtin/interopRequireDefault' from 'index.js. 我解决了它......并且......哦,是的......再次出现.index.js问题......pfff......这是什么?
最后编辑...答案
最后,我意识到网上给出的一些例子是行不通的;语法错误被写入并且不可能运行它们。我很痛苦地解决了错误循环。检查我的整个代码,在某处我通过以下方式进行了导入: import {classX} from './classeX' ...我替换为: import classX from './classeX' 并且我的世界改变了...它起作用了...所以,经过大量测试,下面的代码对我有用:
import React, { Component } from 'react';
import {StyleSheet,View,FlatList, Text, Image } from 'react-native';
export default class Test extends Component {
constructor(props) {
super(props);
};
sampleData = [
{
name: { title: 'mr', first: 'karl', last: 'johnson' },
email: 'karl.johnson@example.com',
picture: {
thumbnail: 'https://randomuser.me/api/portraits/thumb/men/62.jpg',
},
},
{
name: { title: 'mrs', first: 'asuncion', last: 'gomez' },
email: 'asuncion.gomez@example.com',
picture: {
thumbnail: 'https://randomuser.me/api/portraits/thumb/women/52.jpg',
},
nat: 'ES',
},
{
name: { title: 'miss', first: 'gilcenira', last: 'ribeiro' },
email: 'gilcenira.ribeiro@example.com',
picture: {
thumbnail: 'https://randomuser.me/api/portraits/thumb/women/21.jpg',
},
},]
renderItem = ({item, index}) =>
<View style={styles.row}>
<Image style={styles.picture} source={{ uri: item.picture.thumbnail }} />
<View>
<Text style={styles.primaryText}>
{item.name.last + ' ' + item.first}
</Text>
<Text style={styles.secondaryText}>{item.email}</Text>
</View>
</View>
render() {
return(
<View style ={styles.container}>
<Text style = {styles.description}>ok</Text>
<FlatList style={{backgroundColor :'#444',
color : '#fff'}}
data={this.sampleData}
renderItem={this._renderItem}
keyExtractor={(item =>item.email)}/>
</View>)
}
}
const styles = StyleSheet.create({
container : {
flex : 1,
alignItems : 'center',
},
row: {
flexDirection: 'row',
alignItems: 'center',
padding: 12
},
picture: {
width: 50,
height: 50,
borderRadius: 25,
marginRight: 18
},
primaryText: {
fontWeight: 'bold',
fontSize: 14,
color: 'violet',
marginBottom: 4,
},
secondaryText: {
color: 'darkgrey'
},
container : {
flex : 1,
alignItems : 'center',
backgroundColor :'#666',
flexDirection : 'column'
},
description: {
fontSize: 20,
color : '#fff',
textAlign: 'center',
marginTop: 8,
marginBottom : 8,
top : 4
},
});
如果它可以帮助某人...
解决方案
您可以尝试在 renderItem 中返回值。例子:
renderItem = ({item, index}) => (
<View style={styles.row}>
<Image style={styles.picture} source={{ uri: item.picture.thumbnail }} />
<View>
<Text style={styles.primaryText}>
{item.name.last + ' ' + item.first}
</Text>
<Text style={styles.secondaryText}>{item.email}</Text>
</View>
</View>);
在 Flalist 中应该是:
<FlatList
contentContainerStyle={{backgroundColor :'#444'}}
data={this.sampleData}
renderItem={this.renderItem}
keyExtractor={(item =>item.email)}
/>
推荐阅读
- amazon-web-services - 使用 tag::eventtype 动态生成的列在 splunk 中具有标题 null
- ubuntu-20.04 - Symfony:在 Linux Ubuntu 上生成实体时路径错误
- ruby - 如何避免 ruby 类中的层次结构?
- node.js - 全球支付集成:- 我们可以从保存的卡参考 (PMT_REF) 和 PAYER_REF 收取一次性付款吗
- kotlin - Kotlin - 如何增加 mutableMap 的价值
- excel - 您如何编写 VBA 代码以根据单元格填充颜色更改字体颜色
- python - 无法计算使用 string.split 创建的列中的元素,该列应该是一个列表
- python - BeautifulSoup - 链接名称
- linux - 是否可以使用 SAS 为受密码保护的 Linux 文件夹导入和读取 xml 文件
- ios - 什么可能导致某些用户的 NSUbiquitousKeyValueStore.synchronize 失败?