Question

我正在使用react-native运行示例应用程序。我正在使用节标题   用于显示数据列表。在这种情况下，数据将以垂直方式显示。我的问题是如何显示数据   横向使用部分列表。请给我任何建议。谢谢   你。

这是我的代码：

 import { StyleSheet, Text, View, ListView, TouchableOpacity, Image, TouchableWithoutFeedback, ScrollView, SectionList, TextInput, WebView, Platform, FlatList } from 'react-native'
    var setListArray = [
      {
        name: 'Hotel 1',
        data: [
          {
            id: '1'
          },
          {
            id: '2'
          },
          {
            id: '3'
          },
          {
            id: '4'
          },
          {
            id: '5'
          },
          {
            id: '6'
          },
          {
            id: '7'
          },
          {
            id: '8'
          },
          {
            id: '9'
          },
          {
            id: '10'
          },
          {
            id: '11'
          },
          {
            id: '12'
          },
          {
            id: '13'
          },
          {
            id: '14'
          },
          {
            id: '15'
          },
          {
            id: '16'
          },
          {
            id: '17'
          },
          {
            id: '18'
          },
          {
            id: '19'
          },
          {
            id: '20'
          }
        ]
      },
      {
        name: 'Hotel 2',
        data: [
          {
            id: '1'
          },
          {
            id: '2'
          },
          {
            id: '3'
          },
          {
            id: '4'
          },
          {
            id: '5'
          },
          {
            id: '6'
          },
          {
            id: '7'
          },
          {
            id: '8'
          },
          {
            id: '9'
          },
          {
            id: '10'
          }
        ]
      },
      {
        name: 'Hotel 3',
        data: [
          {
            id: '1'
          },
          {
            id: '2'
          },
          {
            id: '3'
          },
          {
            id: '4'
          },
          {
            id: '5'
          },
          {
            id: '6'
          },
          {
            id: '7'
          },
          {
            id: '8'
          },
          {
            id: '9'
          },
          {
            id: '10'
          }
        ]
      }
    ]
    export default class Example extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
      dataSource: new ListView.DataSource({ sectionHeaderHasChanged: (r1, r2) => r1 !== r2, rowHasChanged: (r1, r2) => r1 !== r2 }),
    setListArray: []
    }
    }
    componentWillMount() {

        this.setState({
          setListArray: setListArray
        })
      }
    renderSectionHeader(section) {

        return (
          <View style={{ flex: 1, height: 30, alignItems: 'center', justifyContent: 'center', backgroundColor: 'black' }}>
            <Text style={{ color: 'white' }}>{section.section.name}</Text>
          </View>
        )
      }
    renderItem(item) {
    return (
          <View style={{ flexWrap: 'wrap', marginTop: 10, marginRight: 10, marginBottom: 10 }}>
            <TouchableOpacity>
              <Image style={{ height: 20, width: 20, marginLeft: 10 }} source={require('../images/available.png')} />
            </TouchableOpacity>
          </View>
        )
    }
      render() {
    return(
    <View style={{ flex: 1, marginTop: 10, flexWrap: 'wrap' }}>
      <SectionList sections={this.state.setListArray} renderItem={this.renderItem.bind(this)} renderSectionHeader={this.renderSectionHeader} />
</View>
    )
    }
    }

以下是我的截图：

我想显示如下数据：

Answer 1

我认为您应该处理函数renderItem中的所有节数据，而不仅仅是一个节数据。一些代码如

<View style={{ flexWrap: 'wrap', marginTop: 10, marginRight: 10, marginBottom: 10 }}>
{
 section.data.map((item)=>{
    return (<TouchableOpacity>
      <Image style={{ height: 20, width: 20, marginLeft: 10 }} source={require('../images/available.png')} />
    </TouchableOpacity>);
});
}  
</View>

使用react-native中的节头来水平显示数据

1 个答案: