Как я могу достичь этого макета, используя SectionList в React native - PullRequest
Новая
       9

Как я могу достичь этого макета, используя SectionList в React native

0 голосов
/ 30 мая 2018

На картинке ниже ключевые слова "Мода" и "Мобильный телефон и электроника" будут моим заголовком и могут быть переданы в renderSectionHeader для SectionList.

Каждая подкатегория Мужская мода Женская мода и т. Д. И т. Д. Являются элементами, которые могутпередать в renderItem для SectionList.

Я думаю, что нам нужно использовать FlexWrap для достижения этого для Layout, но не уверен, как я могу использовать его вместе с SectionList.

enter image description here

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Вот рабочий пример.С плоским списком, имеющим липкий заголовок.Надеюсь, это поможет 

/**
 * 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'
  }
});
0 голосов
/ 30 мая 2018

Невозможно использовать flexWrap: 'wrap' с FlatList или SectionList, поэтому вам лучше всего использовать ScrollView (или некоторую стороннюю библиотеку сетки).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...