Пользовательский стиль раздела в разделе List REACT NATIVE - PullRequest
Новая
       48

Пользовательский стиль раздела в разделе List REACT NATIVE

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

Знаете ли вы, как я могу сделать горизонтальный раздел (специфический) в компоненте sectionList React-native?Я хочу сделать второй раздел горизонтальным, я попытался изменить стиль элемента в renderItem с помощью flex: 1 и flexDirection: 'row', но это не работает.У кого-нибудь есть идеи, как я могу установить собственный стиль в разделе или сделать горизонтальный раздел?(в красном круге) 

        <View>
        <SectionList
          renderItem={({item, index, section}) => <CellMainNews isFirst={index===0 ? true: false} data={ item } onPress = {item.onPress } />}
          renderSectionHeader={({section: {title}}) => (
            <Text style={{fontWeight: 'bold'}}>{title}</Text>
          )}
          sections={[
            {title: 'Top post', data: this.props.featured.top, renderItem: overrideRenderItem },
            // this section
            {title: 'Featured posts', data: this.props.featured.secundary, renderItem: overrideRenderItemTwo },
            {title: 'Stories', data: this.props.stories},
          ]}
          keyExtractor={(item, index) => item + index}
            />

            {this.props.loading &&
                <View>
                    <ActivityIndicator size={100} color="red" animating={this.props.loading} />
                </View>
            }
        </View>

enter image description here

С уважением.

1 Ответ

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

Это немного сложно, так как SectionList не отображает контейнер в своих секциях, но вы можете достичь этого, передав массив из одного элемента, содержащий все элементы в указанном элементе.

И выможете использовать компонент по вашему выбору для рендеринга всех элементов в разделе так, как вы хотели.

Я бы предложил использовать FlatList

<View>
    <SectionList
      renderItem={({item, index, section}) => <CellMainNews isFirst={index===0 ? true: false} data={ item } onPress = {item.onPress } />}
      renderSectionHeader={({section: {title}}) => (
        <Text style={{fontWeight: 'bold'}}>{title}</Text>
      )}
      sections={[
        {title: 'Top post', data: this.props.featured.top, renderItem: overrideRenderItem },
        {title: 'Featured posts', data: [this.props.featured.secundary], renderItem: overrideRenderItemTwo }, // Passing here the single element array 
        {title: 'Stories', data: this.props.stories},
      ]}
      keyExtractor={(item, index) => String(index)}
        />

        {this.props.loading &&
            <View>
                <ActivityIndicator size={100} color="red" animating={this.props.loading} />
            </View>
        }
</View>

И ваш overrideRenderItemTwo 

const overrideRenderItemTwo = ({ item, index, section: { title, data } }) => {
  return (
    <FlatList
      showsHorizontalScrollIndicator={false}
      pagingEnabled={true}
      horizontal={true}
      data={item}
      keyExtractor={(item, index) => String(index)}
      renderItem={(
        ({item}) => (<CellMainNews isSecundary={true} isFirst={index===0 ? true: false} data={ item } onPress = {item.onPress } />)
      )}
    />
  );
}

Преимущество этого заключается в том, что вы можете использовать стиль, который вы хотите для представления контейнера определенного раздела

...