React Native 页面上几个相同的自定义组件答案

【问题标题】：React Native several identical custom components on pageReact Native 页面上几个相同的自定义组件
【发布时间】：2019-07-13 12:10:56
【问题描述】：

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

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>
        );
    });

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

【问题讨论】：

标签： reactjs react-native components

【解决方案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>
);

【讨论】：

【解决方案2】：

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

【讨论】：

所以我也试过了没有效果