我在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>
);
};
1条答案
按热度按时间z0qdvdin1#
我在flatList中添加了一个height,它突然开始滚动!