Question

我正在开发本机的示例应用程序。我在FlatList组件中遇到一个问题，我无法使用“节标题”获得“水平列表”视图。

如何显示带有标题栏的“水平网格/列表”。

这是我的代码：

import React, { Component } from "react";
import { FlatList, Text, View, Platform, Image } from "react-native";
import { Card } from "react-native-elements";
var sectionListData = [
{
 data : [
  {
    name: 'Adjustible Spanners',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Screw Drivers',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Hammers',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Allen Keys',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Chisels',
    description: 'Lorem ipsum dolor sit amet'
  },

],
title: "Hand Tools"
},
{
 data : [
  {
    name: 'Angle Grinders',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Diamond Core Cuttters',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Drills',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Wrenches',
    description: 'Lorem ipsum dolor sit amet'
  }
],
title: "Power Tools"
},
{
 data : [
  {
    name: 'Angle Grinders',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Diamond Core Cuttters',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Drills',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Wrenches',
    description: 'Lorem ipsum dolor sit amet'
  }
],
title: "Depoto"
}
]
export default class SubCategory2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data:sectionListData, //{inData:ListObj[0].dataObj, title:ListObj[0].dataTitle},
      iscomesData:false
    };
  }
  componentWillMount(){
    let displayData = [];
    alert("data :"+ JSON.stringify(this.state.data))
    //alert("data: "+JSON.stringify(this.state.data.title))
  }

  _keyExtractor(item, index) {
    return index;
  }

  renderItem(data) {
    let { item, index } = data;
    alert(JSON.stringify(data.item.data))
    return (
      <View style={{padding:5,flex:1}}>
      <View style={{height:30,width:150,flex:0.5,backgroundColor:"transparent",
      borderColor:"black",
      borderWidth:2,
      borderRadius:2,}}>
      <Text style={{fontSize:15,color:"red"}}>
      {item.title}
      </Text>
      </View>
      <Card
        title={null}
        image={{ uri: "https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" }}
        containerStyle={{ padding: 0, width: 160 }}
      >
        <Text style={{ marginBottom: 10 }}>
        {item.data[0].name}
        </Text>
        <Text style={{ marginBottom: 10 }}>
        {item.data[0].description}
        </Text>
      </Card>)
      </View>
    )
}
  render() {
    return (
      <View style={{flex:1,marginTop:20}}>
      <FlatList
        data={this.state.data}
          keyExtractor={(item, index) => String(index) }
          renderItem={this.renderItem.bind(this)}
        />
      </View>
    );
  }
}

如何获得平面列表，如下图所示。 enter image description here

请给我建议。

Answer 1

请在您的视图上尝试 flexDirection：'row'。有关更多信息，这可能会对您有所帮助。.https://reactnativecode.com/flexdirection-row-column-tutorial/

Answer 2

尝试使用各种平面列表

<Text>Adjustible Spanners</text>
<FlatList horizontal
 data={this.state.data}
 keyExtractor={(item, index) => String(index) }
 renderItem={this.renderItem.bind(this)}
/>

renderItem = (itemData) => {  
 return(   
  {    
   itemData.item.name == 'Adjustible Spanners' && 
    <View>
       . . .
    </View>   
  }  
 ) 
}

如何在平面列表中使用节标题获取水平列表视图

2 个答案: