Question

我制作了一个可重复使用的组件，该组件的标题为标题，一个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>
  );
};

Answer 1

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

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

1 个答案: