当选择时，React-native-collapsible如何更改标题项目的样式

Question

我正在尝试使用react-native-collapsible软件包构建一个列表，该列表显示地点，并在选择时显示该保存地点的更多信息。

我希望可折叠手风琴中选定项目的标题在选定时更改样式。

这是正在使用的代码：

import React, { Component } from 'react';
import {View, Text, StyleSheet, FlatList, ScrollView } from 'react-native';
import PlaceDetailComponent from '../components/PlaceDetailComponent';
import ExpandedPlaceDetail from "../components/ExpandedPlaceDetail";
import Accordion from 'react-native-collapsible/Accordion';


const SECTIONS = [
    {placeName: 'Queen Mary 1', rating: '7', price: '£', distance: '4', type: 'Field'},
    {placeName: 'Queen Mary 2', rating: '4', price: '££', distance: '2', type: 'Lecture Hall'},
    {placeName: 'Queen Mary 3', rating: '10', price: '£££', distance: '14', type: 'Cafe'},
    {placeName: 'Queen Mary 4', rating: '6', price: '£', distance: '2330', type: 'Campus'},
    {placeName: 'Queen Mary 5', rating: '3', price: '£££', distance: '1', type: 'University'},
];

class SavedCollapsibleScreen extends Component {
    state = {
        activeSections: [],
    };


    _renderHeader = section => {
        return (
            <View>
                <PlaceDetailComponent placeName = {section.placeName}
                                      rating = {section.rating}
                                      price = {section.price}
                                      distance = {section.distance}
                                      type = {section.type}
                                      expanded = {false}
                />
            </View>
        );
    };

    _renderContent = section => {
        return (
            <View>
                <ExpandedPlaceDetail placeName = {section.placeName}
                                     rating = {section.rating}
                                     price = {section.price}
                                     distance = {section.distance}
                                     type = {section.type}
                />
                {/*<Text style={styles.headerText}>{section.placeName}</Text>*/}
            </View>
        );
    };

    _updateSections = activeSections => {
        this.setState({ activeSections });
    };

    render() {
        return (
            <ScrollView>
                <Accordion
                    sections={SECTIONS}
                    activeSections={this.state.activeSections}
                    renderHeader={this._renderHeader}
                    renderContent={this._renderContent}
                    onChange={this._updateSections}
                />
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
        paddingTop: 30,
    },
    title: {
        textAlign: 'center',
        fontSize: 22,
        fontWeight: '300',
        marginBottom: 20,
    },
    header: {
        backgroundColor: '#F5FCFF',
        padding: 10,
    },
    headerText: {
        textAlign: 'center',
        fontSize: 16,
        fontWeight: '500',
    },
    content: {
        padding: 20,
        backgroundColor: '#fff',
    },
    active: {
        backgroundColor: 'rgba(255,255,255,1)',
    },
    inactive: {
        backgroundColor: 'rgba(245,252,255,1)',
    },
    selectors: {
        marginBottom: 10,
        flexDirection: 'row',
        justifyContent: 'center',
    },
    selector: {
        backgroundColor: '#F5FCFF',
        padding: 10,
    },
    activeSelector: {
        fontWeight: 'bold',
    },
    selectTitle: {
        fontSize: 14,
        fontWeight: '500',
        padding: 10,
    },
    multipleToggle: {
        flexDirection: 'row',
        justifyContent: 'center',
        marginVertical: 30,
        alignItems: 'center',
    },
    multipleToggle__title: {
        fontSize: 16,
        marginRight: 8,
    },
});

export default SavedCollapsibleScreen;

如您所知，

它使用预定义的数组构建列表。数组值作为道具传递给名为PlaceDetailComponent的组件，该组件在_RenderHeader函数中呈现。这形成了手风琴列表（即在手风琴中始终可见的项目）的“页眉”。

本质上，当选择了这些列表头之一或“活动”时，我希望更改所选头的样式，如何实现？

谢谢。