Question

我正在尝试一个简单的本机反应。我的代码是：

我的App.js文件如下：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Headers from './Header';
import Deck from './Deck';
import { Card, Button } from 'react-native-elements';

const DATA = [
  { id: 1, text: 'Card #1', uri: 'http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-04.jpg' },
  { id: 2, text: 'Card #2', uri: 'http://www.fluxdigital.co/wp-content/uploads/2015/04/Unsplash.jpg' },
  { id: 3, text: 'Card #3', uri: 'http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-09.jpg' },
  { id: 4, text: 'Card #4', uri: 'http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-01.jpg' },
  { id: 5, text: 'Card #5', uri: 'http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-04.jpg' },
  { id: 6, text: 'Card #6', uri: 'http://www.fluxdigital.co/wp-content/uploads/2015/04/Unsplash.jpg' },
  { id: 7, text: 'Card #7', uri: 'http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-09.jpg' },
  { id: 8, text: 'Card #8', uri: 'http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-01.jpg' },
];

export default class App extends React.Component {
  renderCard(item){
    console.log("item=",item)
      return(
        <Card
          key={item.id}
          title={item.text}
          image={{uri: item.uri}}
        >
          <Button 
            icon={{ name: 'code'}}
            backgroundColor="#123abc"
            title="View Now"
          />
        </Card>
      );
    }
  render() {
    return (
      <View style={styles.container}>
        <Text>123</Text>
        <Deck
          data={DATA}
          renderCard={this.renderCard}
        />
        <Text>234</Text>
      </View>
    );
  }
}




const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

我的Deck.js是

import React, { Component } from 'react';
import { View, Animated, StyleSheet } from 'react-native';
export default class Deck extends Component {
  renderCards(){
    return this.props.data.map(item=>{
        this.props.renderCard(item)
    })
  }
  render() {
    return (
        <View>
      {this.renderCards()}
      </View>
    );
  }
}

当我在App.js中进行控制台操作时，控制台中会显示所需的项目，但卡组件未按预期方式呈现。我想知道我在这里犯了什么错误。

请检查代码一次，然后更正错误所在。

Answer 1

使用Array.map时，您需要在每次迭代中返回一些内容，否则，结果数组将为空，并且不会呈现任何内容。您的Deck.js应该像：

py -3 -mpip install ipython

未在App.js的react-native中呈现的组件。请纠正我。

1 个答案: