Блог

У меня проблема с длинным списком разделов, который вышел за пределы области просмотра, как я могу заставить его работать нормально? Я пробовал использовать flexShrink:1 , но это не сработало. другое решение, которое я пробовал, используется <ScrollView> , но оно выдает ошибку VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead. , мне действительно нужна помощь в этой проблеме, как заставить список разделов оставаться внутри и работать нормально? вот несколько примеров кода, которые я пробовал

App.js

 import React, { Component } from "react";
import { View, Text } from "react-native";
import AnotherJS from "./AnotherJS";

export default class App extends Component {
  render(){
    return(
      <View style={{backgroundColor:"#5273B7", flex:1, padding:10}}>
        <View style={{backgroundColor:"#ff0000", borderTopLeftRadius:10, borderTopRightRadius:10, padding: 10}}>
          <View style={{backgroundColor:"#ffffff", borderRadius:10}}>
            <Text>Picker Here</Text>
          </View>
        </View>
        <View style={{backgroundColor:"#00ff00", flex:1, borderBottomLeftRadius:10, borderBottomRightRadius:10, padding:10}}>
          <View style={{flexShrink:1}}>
            <AnotherJS/>
          </View>
        </View>
      </View>
    )
  }
}

 

AnotherJS.js

 import React, { Component } from "react";
import {View, Text, SectionList } from "react-native";
import Accordion from "react-native-collapsible/Accordion";

const dataArray = [
  { title: "Info 1",
    content: [
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
    ] },
  { title: "Info 2",
    content: [
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
    ] },
  { title: "info 3",
    content: [
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
    ] }
];

const Item = ({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
);

export default class AnotherJS extends Component {
  state = {
    activeSections: [0],
  };

  _renderHeader = (section) => {
    return(
      <View style={{
        flexDirection: "row",
        padding: 10,
        justifyContent: "space-between",
        alignItems: "center" ,
        backgroundColor: "#A9DAD6" }}>
        <Text style={{ fontWeight: "600" }}>{section.title}</Text>
      </View>
    );
  };

  _renderContent = (section) => {
    return(
      <SectionList
          sections={section.content}
          keyExtractor={(item, index) => item   index}
          renderItem={({ item }) => <Item title={item} />}
          renderSectionHeader={({ section: { title } }) => (
            <Text>{title}</Text>
          )}
        />
    );
  };

  _updateSections = (activeSections) => {
    this.setState({ activeSections });
  };

  render() {
    return (
      <View style={{flexShrink:1}}>
        <Accordion
          sections = {dataArray}
          activeSections = {this.state.activeSections}
          renderHeader = {this._renderHeader}
          renderContent = {this._renderContent}
          onChange = {this._updateSections}
        />
      </View>
    );
  }
}

 

Попробуйте обернуть компонент списка в контейнер.

   _renderContent = (section) => {
    return(
<ListContainer style={{flex: 1}}> // you can add borders for clarity
      <SectionList
          sections={section.content}
          keyExtractor={(item, index) => item   index}
          renderItem={({ item }) => <Item title={item} />}
          renderSectionHeader={({ section: { title } }) => (
            <Text>{title}</Text>
<ListContainer/>
          )}
        />
    );
  }; 
 

Код ListContainer:

 const ListContainer = styled.View`
    flex: 1;
`;