Javascript 如何使用ListView呈现卡中的数据？_Javascript_React Native

Javascript 如何使用ListView呈现卡中的数据？

javascript react-native

Javascript 如何使用ListView呈现卡中的数据？,javascript,react-native,Javascript,React Native,我想通过在卡片中列出本地json文件来呈现它，我使用FlatList视图，但无法呈现它以下是我的代码片段： import React, { Component, View, FlatList } from 'react'; import { Image } from 'react-native'; import { Container, Header, Title, Content,

我想通过在卡片中列出本地json文件来呈现它，我使用FlatList视图，但无法呈现它

以下是我的代码片段：

       import React, { Component, View, FlatList } from 'react';
      import { Image } from 'react-native';
      import {
        Container,
        Header,
        Title,
        Content,
        Button,
        Icon,
        Card,
        CardItem,
        Text,
        Thumbnail,
        Left,
        Body,
        Right
      } from 'native-base';


      import styles from './styles';

      const json = require('./fixtures.json');
      const logo = require('../../../assets/logo.png');
      const cardImage = require('../../../assets/cskvsdd.jpg');


      class Fixtures extends Component {
        render() {
          return (

      <FlatList
      renderItem={({item}) => {
            <Container style={styles.container}>
              <Header>
                <Left>
                  <Button transparent onPress={() => this.props.navigation.goBack()}>
                    <Icon name="arrow-back" />
                  </Button>
                </Left>
                <Body>
                  <Title>Fixtures</Title>
                </Body>
                <Right />
              </Header>

    <Content padder>
      <Card style={styles.mb}>
        <CardItem>
          <Left>
            <Thumbnail source={logo} />
            <Body>
              <Text>json data</Text>
              <Text note>json data</Text>
            </Body>
          </Left>
        </CardItem>

        <CardItem cardBody>
          <Image
            style={{
              resizeMode: 'cover',
              width: null,
              height: 200,
              flex: 1
            }}
            source={cardImage}
          />
        </CardItem>

        <CardItem style={{ paddingVertical: 0 }}>
          <Left>
            <Button transparent>
              <Icon active name="thumbs-up" />
              <Text>josn data</Text>
            </Button>
          </Left>
          <Body>
            <Button transparent>
              <Icon active name="chatbubbles" />
              <Text>json data</Text>
            </Button>
          </Body>
          <Right>
            <Text>json data</Text>
          </Right>
        </CardItem>
      </Card>
    </Content>
  </Container>
}
/>
);
}
}

export default Fixtures;

import React，{Component，View，FlatList}来自'React'；
从“react native”导入{Image}；
进口{
集装箱，
标题，
标题
内容,，
按钮
偶像
卡片
卡迪姆，
文本，
缩略图，
左边
身体，
赖特
}来自“本土基地”；
从“./styles”导入样式；
const json=require（'./fixtures.json'）；
const logo=require（'../../../assets/logo.png'）；
const cardImage=require（'../../../assets/cskvsdd.jpg'）；
类扩展组件{
render（）{
返回(
{
this.props.navigation.goBack（）}>
固定设施
json数据
json数据
约森数据
json数据
json数据
}
/>
);
}
}
导出默认装置；

在这里提问之前，我已经克服了许多教程。但是我想不出来。道歉，如果这是太新手

请通过重构代码帮助我将json数据呈现到卡片上

通过查看您的代码片段，我意识到您没有在代码中的任何地方设置数据。请将数据数组传递到Flatlist中

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
  keyExtractor={(item, index)=> index}
/>

{item.key}
keyExtractor={（项，索引）=>index}
/>

keyExtractor

应该是唯一的。

通过查看您的代码片段，我意识到您没有在代码中的任何位置设置数据。请将数据数组传递到Flatlist中

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
  keyExtractor={(item, index)=> index}
/>

{item.key}
keyExtractor={（项，索引）=>index}
/>

密钥提取程序应是唯一的。
请查看扁平列表文档：

确保JSON数据的格式和访问正确。
请查看平面列表文档：

确保JSON数据的格式和访问正确。
为什么要发布两次答案？简单的错误，伙计，删除了之前的答案。当我尝试发布我的应用程序时，该应用程序没有显示任何答案。没关系，只是给你一个通知。还有一个问题：虽然这个链接可以回答这个问题，但最好在这里包含答案的基本部分，并提供链接供参考。如果链接页面更改，仅链接的答案可能会无效。为什么要发布两次答案？简单的错误，伙计，删除了以前的答案。当我尝试发布我的应用程序时，该应用程序没有显示任何答案。没关系，只是给你一个通知。还有一个问题：虽然这个链接可以回答这个问题，但最好在这里包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能会无效。传递该数据=dataArray dataArray是您的json数组[{..}，{..}，{..}，{..}]，renderItem中的{..}表示数组的每个元素。您希望我在代码导出默认装置的末尾添加此内容；好的，我找到了它，因为react需要一个字符串，我们需要将密钥提取器转换为字符串（）。现在没有问题，但是数据没有呈现到我的屏幕上。它的空格您可以检查是否在constjson=require（'./fixtures.json'）中获取数据
只需添加一个日志并检查，在render before returnpass中data=dataArray dataArray是您的json数组[{..}，{..}，{..}，{..}]，renderItem中的{..}表示数组的每个元素；好的，我找到了它，因为react需要一个字符串，我们需要将密钥提取器转换为字符串（）。现在没有问题，但是数据没有呈现到我的屏幕上。它的空格您可以检查是否在constjson=require（'./fixtures.json'）中获取数据只需添加一个日志并检查，在返回之前在渲染内部