React-Native：部分列表无法滚动

Question

我发现以下部分无法滚动，请告诉我如何修复？

下面是我的代码

import React, { Component } from 'react';
import { Text, View, StyleSheet, SectionList, Button, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';

const ITEM_HEIGHT = 50;
const SECTIONS = [
  {title:'section 1', data: [{title: 'row 1'}, {title: 'row 2'}]},
  {title:'section 2', data: [{title: 'row 1'}, {title: 'row 2'}]},
  {title:'section 3', data: [{title: 'row 1'}, {title: 'row 2'}]},
  {title:'section 4', data: [{title: 'row 1'}, {title: 'row 2'}]},
  {title:'section 5', data: [{title: 'row 1'}, {title: 'row 2'}]},
  {title:'section 6', data: [{title: 'row 1'}, {title: 'row 2'}]},
  {title:'section 7', data: [{title: 'row 1'}, {title: 'row 2'}]},
];
  
export default class App extends Component {
  
  scrollToSection = (index: Number) => {
    this.sectionListRef.scrollToLocation({
      animated: true,
      sectionIndex: index,
      itemIndex:66,
      viewOffset: 0
    });
  };
  
  getItemLayout = (data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  });
  
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.leftColumn}>
        <TouchableOpacity style={styles.button} onPress={() => scrollToSection(0)}>
          <Text style={styles.buttonText}>Scroll to A</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={() => scrollToSection(1)}>
          <Text style={styles.buttonText}>Scroll to B</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={() => scrollToSection(2)}>
          <Text style={styles.buttonText}>Scroll to C</Text>
        </TouchableOpacity>
      </View>
        <SectionList
          style={styles.sectionList}
          sections={SECTIONS}
          ref={ref => (this.sectionListRef = ref)}
          renderSectionHeader={this.renderSectionHeader}
          renderItem={this.renderItem}
          getItemLayout={this.getItemLayout}
        />
      </View>
    );
  }
  
  renderSectionHeader = ({section}) => (
    <View style={styles.header}>
      <Text>{section.title}</Text>
    </View>
  );
  
  renderItem = ({item}) => (
    <View style={styles.item}>
      <Text>{item.title}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 10,
    flexDirection: 'row',
  },
  leftColumn: {
    width: 64,
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    alignItems: 'center',
  },
  sectionList: {
    flex: 1,
    padding: 10
  },
  header: {
    height: ITEM_HEIGHT,
  },
  item: {
    height: ITEM_HEIGHT,
  },
});

Answer 1

需要位于 SafeAreaView 内

// example from the doc
const App = () => (
  <SafeAreaView style={styles.container}>
    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({item}) => (
        <View style={styles.item}>
          <Text style={styles.title}>{item}</Text>
        </View>
      )}
      renderSectionHeader={({section: {title}}) => (
        <Text style={styles.header}>{title}</Text>
      )}
    />
  </SafeAreaView>
);

https://reactnative.dev/docs/sectionlist