Question

当我将一些平面列表分离到不同的组件时，我遇到了问题。我如何像示例表单（图片“ Sample 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,
},
});

My UI

Sample UI

Answer 1

为什么您需要两个单独的平面列表？由于您希望按顺序进行操作：header_No1-> image_No1-> footer_No1然后header_No2-> image_No2-> footer_No2，则一个Flatlist就足够了，它将在其中呈现“页眉”，“图像”和“页脚”组件。

Answer 2

@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 个答案: