react-native - React 图像名称控制台编号而不是名称

Question

我需要在我的 react native 应用程序中包含四个图像的数组。

let pending = require('../../assets/claimsImages/pending.png');
let approved = require("../../assets/claimsImages/approved.png");          
let in_process = require('../../assets/claimsImages/inprocess.png');          
let cancelled = require("../../assets/claimsImages/cancelled.png");

constructor(props) {
        super(props)

        const status_image = [
          pending, approved, in_process, cancelled
        ]

        this.state = {
            newdata: [],
            images: status_image,

        }
    }

当我控制台图像数组时，例如:console.log(this.state.images)，它会向我打印一些随机数字数组，如[2,3,4,5] 或 [8,11,12,13] 而不是他们的名字。

我需要获取所需图像的名称，以便我可以根据图像的个人名称使用 switch case 有条件地进一步渲染图像。

我想要实现的目标:

{val.claim_approval_status.map((status, i) => {
                            console.log('image key',i);
                            console.log('status name:', status)

                            switch(status){
                                case 'Approved':
                                        <View>
                                        <Image style={styles.stretch}
                                                source={this.state.images['approved']}
                                        />
                                    </View>
                                case 'In Process':
                                case 'Rejected':
                                case 'Pending':
                            }

请大家帮忙解决一下。

Answer 1

而不是数组，

const status_image = [pending, approved, in_process, cancelled]

你应该创建一个对象，

const status_image = {
      'Approved': approved,
      'In Process':in_process,
      'Rejected': cancelled,
      'Pending' : pending
}

确保您的 status_image 对象的 key 应与 claim_approval_status 数组的 status 匹配

您可以使用下面的状态访问图像，

{val.claim_approval_status.map((status, i) =>{
    console.log('image key', i);
    console.log('status name:', status)

    switch (status){
        case 'Approved':
            <View>
                <Image style = {styles.stretch}
                    source = {this.state.images[status]}  //can access image using status
                /> 
            </View>
        case 'In Process':
        case 'Rejected':
        case 'Pending':
    }
    })
}