javascript - SectionList 组件没有滚动到 Accordion 组件内的末尾

Question

我试图在 Accordion 组件中制作 SectionList 组件，列表已呈现，但我无法滚动到最后，最后一节中的某些项目没有出现。我试图删除所有样式，将 SectionList 组件包装在<View></View>并添加style={{flex:1}}，但不起作用。这是代码示例：

应用程序.js

import React, { Component } from "react";
import { View, Text } from "react-native";
import { Picker } from "@react-native-picker/picker";
import * as Village from "./mydb";

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      selected: undefined
    };
  }
  onValueChange(value: string) {
    this.setState({
      selected: value
    });
  }
  renderSelectedItem(){
   switch(this.state.selected){
      case '4001':
        return <Village.A/>
      case '4002':
        return <Village.B/>
      default:
        return null
    }
  }
  render(){
    return(
      <View>
        <Picker
          selectedValue={this.state.selected}
          onValueChange={this.onValueChange.bind(this)}
        >
          <Picker.Item label="Village A" value='4001'/>
          <Picker.Item label="Village B" value='4002'/>
        </Picker>
        {this.renderSelectedItem()}
      </View>
    )
  }
}

A.js/B.js

import React, { Component } from "react";
import { StyleSheet, Text, View, SafeAreaView, SectionList, StatusBar } from "react-native";

const DATA = [
  {
    title: "Main dishes",
    data: ["Pizza", "Burger", "Risotto", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
  },
  {
    title: "Sides",
    data: ["French Fries", "Onion Rings", "Fried Shrimps",  "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
  },
  {
    title: "Drinks",
    data: ["Water", "Coke", "Beer",  "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
  },
  {
    title: "Desserts",
    data: ["Cheese Cake", "Ice Cream",  "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
  }
];

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

export default class A extends Component {
  render() {
    return (
      <SectionList
        sections={DATA}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <Item title={item} />}
        renderSectionHeader={({ section: { title } }) => (
          <Text>{title}</Text>
        )}
      />
    );
  }
};

当我复制 A.js/B.js 代码并在 App.js 中替换时，它可以正常工作，当我在 Accordion 组件中渲染 sectionList 组件时出现问题。如何使 SectionList 正常滚动到 Accordion 组件内的末尾？

标签： javascriptreactjsreact-native