如何将我的图像源作为道具从父组件传递给子组件？答案

【问题标题】：How to pass my image source as a prop to a child component from the parent?如何将我的图像源作为道具从父组件传递给子组件？
【发布时间】：2019-11-05 08:14:16
【问题描述】：

我制作了一个可重用的组件，它有一个标题作为标题、一个 Image 和一个 onPress 函数。图像未渲染或显示。请指导我如何动态传递源代码？有没有办法引用从父母到孩子的本地路径？谢谢

我的组件如下：

import React from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  TouchableNativeFeedback,
} from 'react-native';

const ServiceBox = props => {
  return (
    <TouchableNativeFeedback onPress={props.pressed}>
      <View style={styles.container}>
        <Text style={styles.heading}>{props.title}</Text>
        <Image
          style={styles.img}
          source={props.source}
          style={{width: 50, height: 50, marginLeft: 10}}
        />
      </View>
    </TouchableNativeFeedback>
  );
};
export default ServiceBox;

我的 ServicesScreen 类如下：

const ServicesScreen = () => {
  return (
    <View style={styles.containerPage}>
      <View style={styles.container}>
        <StatusBar backgroundColor="#840F53" />
        <ServiceBox
          title="خرید شارژ"
          soruce={require('../../assets/icons/logo.jpg')}
        />
        <ServiceBox
          title="پرداخت قبض"
          soruce={require('../../assets/icons/logo.jpg')}
        />
      </View>
      <View style={styles.container}>
        <StatusBar backgroundColor="#840F53" />
        <ServiceBox
          title="بلیط هواپیما"
          soruce={require('../../assets/icons/logo.jpg')}
        />
        <ServiceBox
          title="بلیط قطار"
          soruce={require('../../assets/icons/logo.jpg')}
        />
      </View>
      <View style={styles.container}>
        <StatusBar backgroundColor="#840F53" />
        <ServiceBox
          title="عوارض راه"
          soruce={require('../../assets/icons/logo.jpg')}
        />
        <ServiceBox
          title="استعلام قبوض"
          soruce={require('../../assets/icons/logo.jpg')}
        />
      </View>
    </View>
  );
};

【问题讨论】：

检查拼写，至少使用 linter。

标签： android reactjs react-native

【解决方案1】：

错误在于您的组件传递了错误的道具。在您的ServiceScreen.js 中，道具拼写错误。它应该是 source 道具，但你为你的 ServiceBox 写了 soruce

【讨论】：