React Native несколько идентичных пользовательских компонентов на странице

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>.