如何在React Native中将以下JSON数据设置到抽屉中的可扩展列表视图中？

Question

我正在使用抽屉式导航视图，其中一些数据是静态的，但是一些来自服务器的json数据。我想在可扩展列表视图中显示应该在静态数据下方显示的json。 我也可以将该json数据设置到部分列表中。我该怎么做？ 这是我的抽屉代码：-

 import {View, Text, TouchableHighlight,StyleSheet,SectionList,
      FlatList} from 'react-native';
 import React,{Component} from 'react';
 import { Icon } from 'react-native-elements';

 export default class Drawer extends Component {     

 constructor(props) {
     super(props);
     this.state = {
         categories : [],
     };
   }

   componentDidMount(){
       this.getCategories();
   }

   getCategories = () => {
     getSessionId().then(sessionId => {
         category(sessionId).then(response => {
        onSuccess(response).then(successResponse => {
            this.setState({
                categories : successResponse,                   
            });
        })
    })
    .catch(error => {
        hideLoader();
        onFailure(error).then(errorMessage => {
            showMessage(JSON.stringify(errorMessage));
        })
    });
  })
   }


   render() {
     return (
    <View style={styles.parent}>
        <Text style={styles.headingTextStyle}>
        QUICK NAVIGATION
        </Text> 
        <DrawerMenuItem iconName='list' iconType='feather' 
           text='My List' 
            onPress={() => {showMessage("MyList"); 
           Actions.myList();}}
        />
        <DrawerMenuItem iconName='user' iconType='font-awesome' 
                text='Profile' 
            onPress={() => {showMessage("Profile"); 
           Actions.profile();}}
        />
        <DrawerMenuItem iconName='explore' iconType='material-
                icons' text='Explore' 
            onPress={() => {showMessage("explore"); 
           Actions.explore();}}
        />
        <Text style={styles.headingTextStyle}>
        BROWSE BY CATEGORY
        </Text>    

        <TextViewNonClickable
            textViewText={JSON.stringify(this.state.categories)}
            textStyle={{color : color.colorBlack,margin:20}}
        />


            <SectionList
                sections={this.state.categories}
                renderItem={({item,index})=>{
                    return(<SubCategories  item={item}  index=
                     {index}/>);
                }}   
                renderSectionHeader={({section}) => {
                    return(<SubCategoryHeader section={section}/>);
                }}
                keyExtractor={({item,index}) => item+index}
            />              
    </View>
     );
   }

 }

 const styles = StyleSheet.create({
     parent : {
         flex : 1,
         width : 300,
         alignItems : 'center'
     },
     touchableHighlightStyle : {
    height : 48,
    alignSelf : 'stretch',
    alignItems : 'flex-start',
    paddingLeft : 16,
    borderBottomWidth: 1,
    borderBottomColor: color.colorHintText,
     },
     textStyle : {
    height : 48,
    alignSelf : 'stretch',
    alignItems: 'center',
    textAlignVertical:'center'
     },
     headingTextStyle : {
    fontSize:20,
    height :48,
    fontWeight: 'bold',
    paddingTop:12,
    backgroundColor:color.loginBgColor,
    alignSelf:'stretch',
    paddingStart:16
     }
 });

 const DrawerMenuItem = (props) => {

     const {iconName,iconType,text,onPress} = props;

     return (
    <TouchableHighlight style={styles.touchableHighlightStyle} 
       onPress = {onPress}>
        <View style={{flexDirection:'row',alignItems:'center'}}>
            <Icon
                name={iconName}
                type={iconType}
                iconStyle={{paddingRight : 16}}
            />
            <Text style={styles.textStyle}>{text}</Text>
        </View>
    </TouchableHighlight>
     )
 }

 class SubCategoryHeader extends Component{

render(){
    return(
        <TextViewClickable
            textViewText={this.props.section.name}
            textStyle={{color:color.colorBlack}}
        />
    )
     }    
 }

 class SubCategories extends Component{
     render(){
    return(
        <TextViewClickable 
            textViewText={this.props.item.subcategories.name} 
            textStyle={{color:color.loginBgColor}} 
        />
    )
     }
 }

这是我想在节列表或可扩展列表中显示的json数据。

[
  {
    "category_id": 3,
    "name": "Auto",
    "subcategories": [
  {
    "subcategory_id": 7,
    "name": "Cars",
    "image": "http://showcase.stamps.services/thumb/stampspro
    /uploads/sub_category/W0rXqLHb_nFfs0b8.jpg"
  }
    ]
  },
  {
    "category_id": 4,
    "name": "Beer, Wine & Spirits",
    "subcategories": [
      {
    "subcategory_id": 15,
    "name": "dsd",
    "image": "http://showcase.stamps.services/thumb/stampspro
        /uploads/sub_category/DMedPZ7q_nFfs0b8.jpg"
  }
    ]
  }
]

在上述json数据中，我想使用类别名称作为Header，将子类别名称用作sub Heading下的数据项