Question

在下图中，关键字“Fashion”和“Mobile and Electronics”将成为我的标题标题，可以传递给SectionList的renderSectionHeader。

每个子类别Men's Fashion Women's Fashion等是可以传递给SectionList的renderItem的项目。

我认为我们需要使用FlexWrap来实现布局，但不确定如何将它与SectionList一起使用。

Answer 1

这是工作示例。平面列表具有粘性标题。希望这有帮助

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
  Image,
  FlatList,
  AsyncStorage
} from 'react-native';
import { ListItem, Left, Body, Right, Title } from "native-base";

const window = Dimensions.get('window');

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

var localizedString;

type Props = {};
export default class App extends Component<Props> {

constructor(Props){
    super(Props);
    localizedString = require('./hi.json');
    this.state={
      language:'en',
      stickyHeaderIndices: [],
      dummy: 1,
      data: [
        { name: "Movies", header: true },
        { name: "Interstellar", header: false },
        { name: "Dark Knight", header: false },
        { name: "Pop", header: false },
        { name: "Pulp Fiction", header: false },
        { name: "Burning Train", header: false },
        { name: "Music", header: true },
        { name: "Adams", header: false },
        { name: "Nirvana", header: false },
        { name: "Amrit Maan", header: false },
        { name: "Oye Hoye", header: false },
        { name: "Eminem", header: false },
        { name: "Places", header: true },
        { name: "Jordan", header: false },
        { name: "Punjab", header: false },
        { name: "Ludhiana", header: false },
        { name: "Jamshedpur", header: false },
        { name: "India", header: false },
        { name: "People", header: true },
        { name: "Jazzy", header: false },
        { name: "Appie", header: false },
        { name: "Baby", header: false },
        { name: "Sunil", header: false },
        { name: "Arrow", header: false },
        { name: "Things", header: true },
        { name: "table", header: false },
        { name: "chair", header: false },
        { name: "fan", header: false },
        { name: "cup", header: false },
        { name: "cube", header: false }
      ],
    };

  }


componentWillMount() {
    var arr = [];
    this.state.data.map(obj => {
      if (obj.header) {
        arr.push(this.state.data.indexOf(obj));
      }
    });
    arr.push(0);
    this.setState({
      stickyHeaderIndices: arr
    });
  }

renderItem = ({ item }) => {
    if (item.header) {
      return (
        <ListItem itemDivider>

          <Body style={{ marginRight: 40, alignItems:'center' }}>
            <Text style={{ fontWeight: "bold" }}>
              {item.name}
            </Text>
          </Body>
        </ListItem>
      );
    } else if (!item.header) {
      return (
        <ListItem style={{ marginLeft: 15}}>
        <TouchableOpacity onPress={()=>{}} style={{width:'100%'}}>
          <Body>
            <Text>{item.name}</Text>
            <View style={{flexDirection:'row', width:'90%', marginTop:'5%'}}>
            <View style={{alignItems:'center', borderBottomWidth:1, borderRightWidth:1, paddingRight:'5%', paddingBottom:'2%'}}>
              <Image style={{width: 100, height: 100, borderRadius:100}} source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}} />
              <Text>Heading</Text>
            </View>

            <View style={{alignItems:'center', borderBottomWidth:1, borderRightWidth:1, paddingRight:'5%', paddingLeft:'5%', paddingBottom:'2%'}}>
              <Image style={{width: 100, height: 100, borderRadius:100}} source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}} />
              <Text>Heading</Text>
            </View>

            <View style={{alignItems:'center', borderBottomWidth:1, paddingLeft:'5%', paddingBottom:'2%'}}>
              <Image style={{width: 100, height: 100, borderRadius:100}} source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}} />
              <Text>Heading</Text>
            </View>
          </View>

          <View style={{flexDirection:'row', width:'90%'}}>
            <View style={{alignItems:'center',  borderRightWidth:1, paddingRight:'5%', paddingTop:'2%'}}>
              <Image style={{width: 100, height: 100, borderRadius:100}} source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}} />
              <Text>Heading</Text>
            </View>

            <View style={{alignItems:'center',  borderRightWidth:1, paddingRight:'5%', paddingLeft:'5%', paddingTop:'2%'}}>
              <Image style={{width: 100, height: 100, borderRadius:100}} source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}} />
              <Text>Heading</Text>
            </View>

            <View style={{alignItems:'center', paddingLeft:'5%', paddingTop:'2%'}}>
              <Image style={{width: 100, height: 100, borderRadius:100}} source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}} />
              <Text>Heading</Text>
            </View>
          </View>
          </Body>
        </TouchableOpacity>
        </ListItem>
      );
    }
  };

  render() {
    return (
      <View style={{ width:'100%', marginBottom:'7%', height:'100%'}}>
              <FlatList
                data={this.state.data}
                renderItem={this.renderItem}
                keyExtractor={item => item.name}
                stickyHeaderIndices={this.state.stickyHeaderIndices}
              />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  SectionHeaderStyle:{
    backgroundColor : '#EAEAED',
    padding: 5,
    color: '#000000',
  },

  SectionListItemStyle:{
    fontSize : 15,
    padding: 10,
    color: '#000'
  }
});

Answer 2

使用FlatList或SectionList不可能使用 flexWrap：'wrap'，因此最好使用ScrollView（或某些第三方网格库）。

Answer 3

可以通过具有属性FlatList的{{1}}来实现此设计。

numColumns

示例：https://snack.expo.io/@spencercarli/react-native-flatlist-grid

参考链接： 1. https://facebook.github.io/react-native/docs/flatlist

如何在React native中使用SectionList实现此布局

3 个答案: