将本地图像路径作为两个功能组件之间的道具传递

Question

我正在用 react-native 做一个项目，我很难理解 props 如何在功能组件之间工作。我的要求是创建一个可重复使用的按钮组件，我可以在项目中的资源文件中传递图像位置，这样它就会为我创建按钮。出于某种原因，如果我手动提供所需的位置，它会工作并为我创建按钮，但如果 i\I 将位置作为道具从我创建的位置传递，它将出于某种原因无法工作。我的代码如下。

按钮组件

import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Image,
    TouchableOpacity
} from 'react-native';

const ButtonWithImage = (props) => {
    const {buttonStyle} = styles;
    const clickEvent = () => {}

    return (
        <TouchableOpacity onPress= {clickEvent}style={buttonStyle}>
            <Image 
                source={props.imagePath} 
                style={styles.ImageIconStyle} 
            />
        </TouchableOpacity>
    );
};

const styles = {
    buttonStyle: {
        //alignSelf:'stretch',
        height: 50,
        width:50,
        paddingTop:0,
        flexDirection: 'row'
    }
};

export default ButtonWithImage;

我创建按钮并传递道具的地方

import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Dimensions,
} from 'react-native';
import FooterIcons from './ButtonWithImage'

const Footer = () => {
    return (
        <View style={styles.footerStyle}>
            <FooterIcons imagePath = {'./images/homeButton/homeBtn.png'} />
        </View>
    );
};

const styles = StyleSheet.create({
    footerStyle: {
        height: 60,
        width: 100,
        // justifyContent:'flex-start'
    },
});

export default Footer;

Answer 1

这是不可能的，因为您需要一个具有本地路径的图像 <Image source={require(props.path)} /> 这不起作用，因为 require 只能将字符串文字作为参数。

这意味着您必须执行以下操作：

<FooterIcons imagePath = {require('./images/homeButton/homeBtn.png')} 
/>

让它发挥作用。并且不要忘记为您的图片指定 width 和 height.

或

您可以采用适合没有大量图像的应用程序的方式来执行此操作，因为我们会预加载它们：

1- 制作一个资产 javascript 文件 assets.js ，这个文件应该需要你所有的本地图像，像这样：

const assetsObject = {
  homeIcon: require('./images/homeButton/homeBtn.png')
  boatIcon: require('./images/homeButton/boat.png')
  ....
  ...
}
module.exports = assetsObject

2- 现在您需要在 ButtonWithImage.js 文件中要求此文件

const assets = require('./assets.js')

const ButtonWithImage = (props) => {
  const {buttonStyle} = styles;
  const clickEvent = () => {}

  return (
      <TouchableOpacity onPress= {clickEvent}style={buttonStyle}>
         <Image 
            source={assets[props.imagePath]} 
            style={styles.ImageIconStyle} 
         />
      </TouchableOpacity>
  );
};

3- 您发送给 ButtonWithImage 的道具应该是我们创建的 assetsObject 的键 'homeIcon' 或 'boatIcon' ..etc

const Footer = () => {
return (
    <View style={styles.footerStyle}>
        <FooterIcons imagePath = {'homeIcon'} />
    </View>
);
};

4- 不要忘记给您的图片设置宽度和高度

就是这样，我建议不要再调用道具 imagePath，也许只是图像。

Answer 2

您可以像传递其他专业人士一样简单地传递价值。

import picture from 'linkOfYourImage.png';

function Func() { 
<YourComponent imgLink={picture }/>
}

将本地图像路径作为两个功能组件之间的道具传递

Pass the local image path as a prop between two functional components

reactjs

react-native

react-props