Question

我需要在本机应用程序中包含四个图像数组。

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]的形式显示一些随机数数组，而不是其名称。

我需要获取所需图像的名称，以便我可以根据其个别名称使用开关大小写来有条件地进一步渲染图像。

我想要实现的目标：

{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

您的现值只是一个arrangement。您必须将其设置为JSON格式。并删除不必要的代码，并简化代码以提高可读性。

constructor(props) {
        super(props)

        this.state = {
            newdata: [],
            images: [
          {name: pending, path : require('../../assets/claimsImages/pending.png')},
          {name: approved, path : require("../../assets/claimsImages/approved.png")},
          {name: in_process, path : require('../../assets/claimsImages/in_process.png')},
          {name: cancelled, path : require('../../assets/claimsImages/cancelled.png')}
        ],

        }
    }
...
{this.state.images.map((item, i) => {
                            switch(item.name){
                                case 'approved': 
                                        (<View>
                                        <Image style={styles.stretch}
                                                source= {item.path}
                                        />
                                    </View>)
                                    break;
                                case 'in_process': break;
                                case 'cancelled': break;
                                case 'pending': break;
                            }

Answer 2

代替数组

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匹配

您可以使用下面的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':
    }
    })
}

反应图像名称控制台编号不是名称

2 个答案: