如何安排渲染平面列表？答案

【问题标题】：How to arrange render flatlist?如何安排渲染平面列表？
【发布时间】：2018-08-10 16:38:08
【问题描述】：

当我将一些平面列表分成不同的组件时，我遇到了问题。如何像示例表单（图片“示例 UI”）一样安排渲染平面列表？我尝试了，但它不起作用。它呈现平面列表 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,
},
});

【问题讨论】：

标签： javascript android ios react-native mobile

【解决方案1】：

嗨，@angelos_lex 说您不需要两个我认为的平面列表，因此您可以仅在标题组件中显示该图像组件图像

export default class Header extends Component{
    renderItem(item) {
        return(
          <View style = {{flexDirection:'colomn'}}> **//give require styles**
            <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>
            <Image source = {{uri: item.item.image}} style ={styles.image}/> **// i am not sure what uri should be given**
         </View>
     );

 **// remaining code**

【讨论】：

【解决方案2】：

为什么您需要两个单独的平面列表？既然你想要它的顺序：header_No1->image_No1->footer_No1 然后 header_No2->image_No2->footer_No2，那么一个 Flatlist 就足够了，它将在里面渲染“header”“image”和“footer”组件。

【讨论】：