FlatList无法在react-native中滚动,目前为止没有任何帮助

goucqfw6  于 2023-01-05  发布在  React
关注(0)|答案(1)|浏览(167)

我在react-native中有一个flatlist,但是它不能滚动。我在stackoverflow上尝试了很多答案,但是没有一个对我有效。
我在平面列表本身上没有样式。我在Android模拟器和我自己的设备上试过,没有任何效果。

    • 屏幕图像:**

当我删除带有输入&按钮的View并向平面列表中的数组添加大量评论时,平面列表突然开始滚动,但当我将输入添加回去时,它不再滚动了

    • 我的密码:**
import {
  FlatList,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
  ScrollView,
} from "react-native";
import React, { useState, useEffect } from "react";

const ReviewScreen = () => {
  const [inputTitle, setInputTitle] = useState("");
  const [inputReview, setInputReview] = useState("");
  const [inputName, setInputName] = useState("");

  let existingReviews = [
    {
      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 [Title, setTitle] = useState("");
  const [review, setReview] = useState("");
  const [name, setName] = useState("");
  const [reviews, setReviews] = useState(existingReviews);

  const newTitleHandler = (enteredText) => {
    console.log(enteredText);

    setTitle(enteredText);
  };

  const newReviewHandler = (enteredText) => {
    console.log(enteredText);

    setReview(enteredText);
  };

  const newNameHandler = (enteredText) => {
    console.log(enteredText);

    setName(enteredText);
  };

  const addReviewHandler = () => {
    let newReview = { title: Title, name: name, review: review };

    let modifiedObj = {
      title: newReview.title,
      name: newReview.name,
      review: newReview.review,
    };

    setReviews((existingReviews) => [...existingReviews, modifiedObj]);
  };

  return (
    <View style={styles.container}>
      <View>
        <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
        data={reviews}
        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>
  );
};
z0qdvdin

z0qdvdin1#

    • 解决方案**

我在flatList中添加了一个height,它突然开始滚动!

相关问题