Question

我正在使用react-native进行一个项目，在那里我很难理解道具如何在功能组件之间工作。我的要求是创建一个可重复使用的按钮组件，我可以在项目中的资源文件中传递图像位置，因此它将为我创建按钮。出于某种原因，如果我手动给出所需的位置，它将工作并为我创建按钮，但如果我\我通过该位置作为道具从我创建它不会工作由于某种原因。我的代码如下。

按钮组件

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')} 
/>

使其成功。并且不要忘记给你的图像一个宽度和高度。

或

您可以通过适用于没有大量图片的应用的方式来实现，因为我们会预先加载它们：

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-不要忘记给你的图像一个宽度和高度

多数民众赞成，我建议不再调用prop imagePath，也许只是图像。

将本地图像路径作为两个功能组件之间的prop

1 个答案: