Question

我目前正在创建一个React Native的小例子。我遇到的问题是，当我尝试将图像源从LoginScreen组件传递到ImageHolder组件时，节点显示以下错误：

Loading dependency graph, done.
error: bundling failed: Error: src\ImageHolder.js:Invalid call at line 7: require({
  imageSource: imageSource
})
    at C:\Users\Kuro\vuichoi_ui\node_modules\metro\src\JSTransformer\worker.js:247:19
at Generator.next (<anonymous>)
at step (C:\Users\Kuro\vuichoi_ui\node_modules\metro\src\JSTransformer\worker.js:40:30)
at C:\Users\Kuro\vuichoi_ui\node_modules\metro\src\JSTransformer\worker.js:51:15

这是我的代码：

LoginScreen.js呈现：

render() {
        if (true) {
            return (
                <View>
                    <LoginText
                        imgSource="./img/account.png"
                        secureOption={false}
                        value={this.state.username}
                        placeholder="username"
                        onChangeText={username => this.setState(username)}
                    />
                </View>
            )
        }
    }

LoginText.js：

const LoginText = ({imgSource, secureOption, placeholder, value, onChangeText}) => {

    return (
        <View style={styles.containerStyle}>
            <ImageHolder imageSource={imgSource} />
            <InputField placeholder={placeholder} secureOption={secureOption} value={value} onChangeText={onChangeText}/>
        </View>
    )
}

ImageHolder.js：

const ImageHolder = ({imageSource}) => {
    return (
     <View style={styles.imgContainerStyle}>
            <Image source={require(imageSource)}></Image>
        </View>
    )
}

Answer 1

问题出在Image的路径上。如果所有组件都在同一路径上，那么您可以做同样的事情。

解决方案是您需要从 LoginScreen.js

传递图片

render() {
        if (true) {
            return (
                <View>
                    <LoginText
                        imgSource={require('./img/account.png')}
                        secureOption={false}
                        value={this.state.username}
                        placeholder="username"
                        onChangeText={username => this.setState(username)}
                    />
                </View>
            )
        }
    }

ImageHolder.js

const ImageHolder = ({imageSource}) => {
    return (
     <View style={styles.imgContainerStyle}>
            <Image source={imageSource}></Image>
        </View>
    )
}

替换两个js上面的代码，它将对您有用。

尝试将图像源从组件传递到其子组件时出错

1 个答案: