javascript - 使用 react native 中的节标题水平显示数据

Question

I am running sample app in react-native. I am using section headers for displaying list of data. In this case data will be displayed in vertical. My question is how to display the data in horizontal using section list. Please give me any suggestion. Thank You.

Here is my code:

 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>
    )
    }
    }

Here is my screenshot:

I want to display the data like this:

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>