如何在本机中将平面列表A转换为平面列表B？

Question

当我将一些平面列表分离到不同的组件时，我遇到了问题（我的代码在图片中）。我该如何安排渲染平面列表，如示例表格（图片“示例表格”）？我尝试了，但不起作用。它呈现了平面列表A，然后呈现了平面列表B。请帮助我解决它。有另一种方法可以解决它。 谢谢。

我的代码在这里。

标题组件

import React, {Component} from 'react'
import {View,Text,StyleSheet,FlatList,Image} from 'react-native'
import data from '../data/FlatListData.json'

//Component render flat-list. Show name of artist and albums.
export default class Header extends Component{
  renderItem(item) {
    return(
      <View style = {styles.flatlist}>
      <Image
        source = {{uri: item.item.thumbnail_image}} style ={styles.imageThumbnail}>
      </Image>
      <View style= {{
                      flex: 1,
                      flexDirection: 'column'
                    }}>
          //show title
          <Text style = {styles.textTitle}>{item.item.title}</Text>  
          //show name of artist
          <Text style = {styles.textArtist}>{item.item.artist}</Text> 
      </View>
    </View>
    );
  }

  render(){
      return(
        <View style = {{flex: 1}}>
          <View style = {{flex: 1}}>
              <FlatList
                data = {data}
                renderItem = {this.renderItem}
                keyExtractor = { (item) => item.title.toString() }
              />
          </View>
        </View>
      );
    }
}


//style 
const styles = StyleSheet.create({
  container: {
    marginTop: 20,
    justifyContent: 'center',
    alignItems: 'center',
    borderColor: '#d6d7da',
    borderRadius: 4,
    borderWidth: 0.5,
    fontSize: 1,
    height: 50,
    marginLeft: 10,
    marginRight:10
  },
  text: {
    fontSize: 20,
  },
  flatlist: {
    flex: 1,
    flexDirection: 'row',
    marginRight: 20,
    marginLeft: 20,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 4,
    borderWidth: 0.4,
    borderColor: '#d6d7da',
    marginTop: 20,
    height: 60
  },
  imageThumbnail: {
  width: 50,
  height: 50,
  margin: 5
},
image: {
  width: 320,
  height: 240,
  margin: 5
},
})

图像组件

import React, {Component} from 'react'
import {View,Text,StyleSheet,FlatList,Image} from 'react-native'
import data from '../data/FlatListData.json'

// Component show image of albums
export default class ImageCom extends Component{
  renderItem(item) {
    return(
      <View style = {styles.flatlist}>
        //Image of albums
        <Image
          source = {{uri: item.item.image}} style ={styles.image}>
        </Image>
    </View>
    );
  }

  render(){
      return(
        <View style = {{flex: 1}}>
          <View style = {{flex: 1}}>
              <FlatList
                data = {data}
                renderItem = {this.renderItem}
                keyExtractor = { (item) => item.title.toString() }
              />
          </View>
        </View>
      );
    }
}


//style sheet
const styles = StyleSheet.create({
  flatlist: {
    flex: 1,
    flexDirection: 'row',
    marginRight: 20,
    marginLeft: 20,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 4,
    borderWidth: 0.4,
    borderColor: '#d6d7da',
    marginTop: 5,
    height: 250
  },
  image: {
    width: 320,
    height: 240,
    margin: 5
  },
})

App.js

import React, {Component} from 'react'
import {View,Text,StyleSheet,FlatList} from 'react-native'
import Tabbar from './src/components/Tabbar'
import Header from './src/components/Header'
import ImageCom from './src/components/ImageCom'

//Combine components and show it on UI
export default class App extends Component{
  render() {
    return(
      <View style = {styles.container}>
        <Tabbar />   //Hello
           <Header />    //Artist and albums
              <ImageCom />   //Image of albums
      </View>
    );
  }
}

const styles = StyleSheet.create ({
  container: {
  flex: 1,
},
});

我的用户界面

用户界面的外观