React Native中FlatList无法滚动问题求助

问题根源 #

你的FlatList无法滚动，核心原因是布局空间分配错误：

• 外层View未设置flex:1，导致它没有占满整个屏幕高度
• 顶部输入框区域和FlatList在默认flex:column布局下，FlatList没有被分配到足够的可滚动空间，当数据量不多时，FlatList高度被内容撑开，无法触发滚动逻辑

修复方案 #

修改布局样式，给容器和FlatList分配正确的空间：

1. 给外层容器添加flex:1，确保它占满屏幕
2. 给顶部输入框区域设置flexShrink:1，让它仅占据自身内容高度
3. 给FlatList设置flex:1，填充剩余屏幕空间

修改后的完整代码 #

import {
  FlatList,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
  ScrollView,
} from "react-native";
import React, { useState } from "react";

const ReviewScreen = () => {
  const [Title, setTitle] = useState("");
  const [review, setReview] = useState("");
  const [name, setName] = useState("");
  const [reviews, setReviews] = useState([
    {
      title: "I love F1",
      name: "Tibo Mertens",
      review:
        "This car may have a legendary driver on their team, but unfortunately, their car doesn't live up to his skills",
    },
    {
      title: "F1 is awesome",
      name: "Quintt Adam",
      review:
        "This car is extremely middle of the pack when it comes to the best car on the grid of 2022",
    },
    {
      title: "F1 is awesome",
      name: "Quintt Adam",
      review:
        "This car is extremely middle of the pack when it comes to the best car on the grid of 2022",
    },
  ]);

  const newTitleHandler = (enteredText) => setTitle(enteredText);
  const newReviewHandler = (enteredText) => setReview(enteredText);
  const newNameHandler = (enteredText) => setName(enteredText);

  const addReviewHandler = () => {
    setReviews(prev => [...prev, { title: Title, name, review }]);
  };

  return (
    <View style={styles.container}>
      {/* 顶部输入框区域 */}
      <View style={styles.inputSection}>
        <Text style={styles.writeText}>Write your own review:</Text>

        <TextInput
          style={styles.titleInput}
          placeholder="Title of your review"
          clearButtonMode="always"
          onChangeText={newTitleHandler}
        />
        <TextInput
          style={styles.reviewInput}
          placeholder="Your review"
          clearButtonMode="always"
          onChangeText={newReviewHandler}
        />

        <TextInput
          style={styles.nameInput}
          placeholder="Your name"
          clearButtonMode="always"
          onChangeText={newNameHandler}
        />

        <TouchableOpacity style={styles.btn} onPress={addReviewHandler}>
          <Text style={styles.btnText}>Post review</Text>
        </TouchableOpacity>
      </View>
      {/* FlatList设置flex:1填充剩余空间 */}
      <FlatList
        style={styles.flatList}
        data={reviews}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
            <View style={styles.reviewContainer}>
              <Text style={styles.reviewTitle}>{item.title}</Text>
              <Text style={styles.review}>{item.review}</Text>
              <Text style={styles.reviewName}>- {item.name}</Text>
            </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1, // 外层容器占满屏幕
    padding: 16,
  },
  inputSection: {
    flexShrink: 1, // 输入区域仅占自身内容高度
    marginBottom: 16,
  },
  flatList: {
    flex: 1, // FlatList填充剩余空间
  },
  writeText: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 12,
  },
  titleInput: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    padding: 8,
    marginBottom: 8,
  },
  reviewInput: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    padding: 8,
    marginBottom: 8,
    height: 100,
    textAlignVertical: 'top',
  },
  nameInput: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    padding: 8,
    marginBottom: 12,
  },
  btn: {
    backgroundColor: '#2196F3',
    padding: 12,
    borderRadius: 4,
    alignItems: 'center',
  },
  btnText: {
    color: 'white',
    fontWeight: 'bold',
  },
  reviewContainer: {
    backgroundColor: '#f5f5f5',
    padding: 12,
    borderRadius: 4,
    marginBottom: 8,
  },
  reviewTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  review: {
    fontSize: 14,
    marginBottom: 6,
  },
  reviewName: {
    fontSize: 12,
    color: '#666',
    textAlign: 'right',
  },
});

额外优化说明 #

• 添加keyExtractor属性，避免React Native渲染列表时的警告
• 简化了状态更新逻辑，去掉冗余代码
• 补充了基础样式，提升界面可读性

内容的提问来源于stack exchange，提问作者Tibo Mertens