反应本机页面上的几个相同的自定义组件

Question

我正在尝试在同一页面上显示我的几个自定义组件，但是这些组件以相同的内容显示。

import React from 'react';
import { StyleSheet, Image, View, ActivityIndicator, Text } from 'react-native';
import { AppLoading, Font } from 'expo';
export default class UiCard extends React.Component {
  state = { fontsLoaded: false };
  constructor(props){
    super(props);
    image = props.image;
    mainText = props.mText;
    bottomText = props.bText;
  }

  render() {
    if( !this.state.fontsLoaded ) {
      return <AppLoading/>
    }

    return (
      <View    style={styles.rowItem}>
        <View  style={styles.rowItemInner}>
          <View  style={styles.rowItemImage}>
            <Image
              source={{ uri: image }}
              style={{  height: 150 }}
              PlaceholderContent={<ActivityIndicator />}
            />
            <View  style={styles.rowItemStars}>
            </View>
          </View>
          <View style={styles.rowItemContent}>
            <Text  style={styles.rowItemContentText}> {mainText} </Text>  
          </View>
          <View  style={styles.rowItemFooter}>
            <Text  style={styles.rowItemFooterText}> {bottomText} </Text>
          </View>
        </View>
      </View>
    );
  }
}

在呼叫页面上

var CardsArray = [
  {id: 0, image: "", stars: 3, stext: "get 83$ back", text: "This is text card special"},
  {id: 1, image: "", stars: 5, stext: "get 22$ back", text: "This is text card ui special"},
];
var CardList = CardsArray.map( (item, index) => {
        return (
          <UiCard key={item.id} uid={item.id}  stars={item.stars} image={item.image} mText={item.text}  bText={item.stext} ></UiCard>
        );
    });

但显示的组件以相同的内容显示，尽管将不同的内容传输到组件。有任何想法吗 ？请帮助我）

Answer 1

，而不是在构造函数中打扰它：

image = props.image;
mainText = props.mText;
bottomText = props.bText;

只是直接在标记中使用道具：

return (
  <View    style={styles.rowItem}>
    <View  style={styles.rowItemInner}>
      <View  style={styles.rowItemImage}>
        <Image
          source={{ uri: this.props.image }}
          style={{  height: 150 }}
          PlaceholderContent={<ActivityIndicator />}
        />
        <View  style={styles.rowItemStars}>
        </View>
      </View>
      <View style={styles.rowItemContent}>
        <Text  style={styles.rowItemContentText}> {this.props.mText} </Text>  
      </View>
      <View  style={styles.rowItemFooter}>
        <Text  style={styles.rowItemFooterText}> {this.props.bText} </Text>
      </View>
    </View>
  </View>
);

Answer 2

您以错误的方式返回UiCard，这是JSX，而不是HTML。它应该看起来像<UiCard ...all the props />，而不是<UiCard ...props ></UiCard>。