Question

我在使ButtonGroup动态化时遇到问题，我尝试了很多，但似乎无济于事，请有人帮我吗？

import React from 'react';
import { ButtonGroup } from 'react-native-elements';

export default class WebsiteFilter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            WebsiteFilter: 3
    };
}

updateIndex = ( WebsiteFilter ) => this.setState({ WebsiteFilter })

render() {
    const buttons= ['Vergelijkdirect', 'Ivanhoe', 'Bespaarcoach'];
    let { WebsiteFilter } = this.state;
    return (
        <ButtonGroup
            textStyle={{ textAlign: 'center', fontSize: 12, }}
            onPress={this.updateIndex}
            WebsiteFilter={WebsiteFilter}
            buttons={buttons}
        />
    );
    }
}

代替：

const buttons= ['Vergelijkdirect', 'Ivanhoe', 'Bespaarcoach'];

我需要显示此数组的域：

[{"id":127,"created_at":"2015-11-02 15:35:11","updated_at":"2016-09-19 11:42:10","deleted_at":null,"customer_id":66,"domain":"http:\/\/vergelijkdirect.com","google_id":"UA-97758230-1","currency_id":1,"root":1,"screenshot":"","integration_date":"2016-09-19 11:42:10"},{"id":283,"created_at":"2017-01-13 16:54:24","updated_at":"2017-01-13 16:54:24","deleted_at":null,"customer_id":66,"domain":"https:\/\/ivanhoe.io","google_id":null,"currency_id":1,"root":0,"screenshot":"","integration_date":null},{"id":327,"created_at":"2017-06-14 19:29:42","updated_at":"2017-06-23 17:29:01","deleted_at":null,"customer_id":66,"domain":"http:\/\/bespaarcoach.vergelijkdirect.com","google_id":"UA-39848260-2","currency_id":1,"root":0,"screenshot":"","integration_date":"2017-06-23 17:29:01"}]

Answer 1

属性buttons需要一个字符串或组件数组，因此，在您的情况下，您需要map数组并返回要显示的属性：

data.map(e => e.id)

此外，ButtonGroup组件没有属性WebsiteFilter，它必须是selectedIndex。

您的组件应如下所示：

<ButtonGroup
    textStyle={{ textAlign: 'center', fontSize: 12, }}
    onPress={this.updateIndex}
    selectedIndex={this.state.WebsiteFilter}
    buttons={data.map(e => e.id)}
/>

这里是工作中的demo。

试图使数组在本机反应

1 个答案: