自从升级到最新的 React-Native 版本（0.55.4）以来，我在滚动模态列表时遇到了问题。在本例中它是一个 Flatlist
有问题的 Flatlist 位于一个模态中，该模态位于另一个模态中，该模态在另一个 Flatlist 上呈现为页脚组件（它是一个添加按钮）。
请帮忙！谢谢
代码：
Flatlist 页脚组件（添加按钮）：
@observer
class AddButton extends Component {
@observable visible = false;
constructor(props) {
super(props);
this.state = {
mergeName: '',
coin: undefined
};
}
show = () => {
this.visible = true;
};
hide = () => {
this.visible = false;
};
render() {
return (
<View>
<Button
primary
onPress={() => {
this.show();
}}
title={'add'}
style={{
width: '50%',
alignSelf: 'center',
marginVertical: 16
}}
/>
<Modal
visible={this.visible}
animationType='slide'
onRequestClose={this.hide}
> …我正在尝试创建一个在FlatList组件上方呈现的标头。如果屏幕高 800 像素，标题高 100 像素，则标题FlatList应填充 700 像素（带有flexGrow: 1），并且可滚动（如果 太多ListItems）。基本标记如下：
<View style={{flexGrow: 1, backgroundColor: 'soothing-yellow-thunder'}}>
<Header style={{height: 100}} />
<FlatList ... />
</View>
但是，当我渲染标题时，FlatList组件的高度实际上是 800px，与包装组件的高度匹配flexGrow: 1。我可以看出它是 800px - 其中最后 100px 只能通过故意滚动到 FlatList 认为结束的位置来访问。FlatList“额外”高度恰好等于标头的高度。实际工作代码以及小吃链接（应该允许您在浏览器中重现，或者如果您安装了 expo，则可以在手机上重现）：
https://snack.expo.io/@sgardn04/flatlist-header-example
import * as React from 'react';
import { Text, View, FlatList } from 'react-native';
export default class App extends React.Component {
_renderList() {
return (
<FlatList
data={[{key: '0', content: 'hello …我的处境非常令人沮丧。尝试让键盘消失并检测子行中的 onPress 事件处理程序。
我的代码如下所示：
_renderRow = (prediction) => {
return (
<TouchableOpacity onPress={() => {
Keyboard.dismiss();
this.setState({ location: prediction.description });
}}>
<View style={styles.listItemContainer}>
<Text>{prediction.description}</Text>
</View>
</TouchableOpacity>
)
}
render() {
return (
<View style={styles.wrapper}>
{/* style={[this.state.predictions.length > 0 ? styles.searchContainerSuggest : styles.searchContainer]} */}
<View style={styles.searchContainerSuggest}>
<View style={{paddingLeft: 10, height: 45, display: 'flex', justifyContent: 'center'}}>
<TextInput
placeholder="Enter location"
value={this.state.location}
onChangeText={location => this.onChangeLocation(location)}
style={styles.textInput}
/>
</View>
{this.state.predictions.length && this.state.location !== '' ?
<FlatList
keyboardShouldPersistTaps={'handled'}
refreshing={!this.state.loaded}
initialNumToRender={10}
enableEmptySections={true}
data={this.state.predictions}
keyExtractor={(_, index) => index.toString()} …我正在Item SeparatorComponent为我的FlatList. 有没有办法将该行添加到列表的最末尾，例如最后一项的底部边框？
export default Item = ({ title, data }) => {
const renderSeparator = () => (
<View
style={{
backgroundColor: 'lightgrey',
height: 0.5,
}}
/>
)
return (
<View style={styles.container}>
<View style={styles.title}>
<Text style={styles.titleText}>{title}</Text>
</View>
<View style={styles.subItem}>
<FlatList
ItemSeparatorComponent={renderSeparator}
data={data}
renderItem={({ item }) => (
<SubItem
title={item.title}
subText={item.subText}
/>
)}
keyExtractor={item => item.id.toString()}
/>
</View>
</View>
)
}
当我FlatList在内部使用组件时ScrollView，我看到一条警告：
VirtualizedList 永远不应该嵌套在具有相同方向的普通 ScrollView 中 - 请改用另一个 VirtualizedList 支持的容器。
前后FlatList我使用了很多其他组件，而且我的屏幕很长。
我尝试用 来包装内容SafeAreaView，但它对我没有帮助，因为在这种情况下我无法滚动内容。我也尝试在 中使用ListHeaderComponent={SafeAreaView}and 。ListFooterComponent={SafeAreaView}<FlatList>
我用：
react-native react-native-scrollview react-native-flatlist safeareaview
我有一个FlatList，我正在实现一个自定义拉动刷新，其想法是将其滚动到负偏移量，以在释放时显示其下方的动画。这是我的代码FlatList。
const flatListRef = useRef(null);
const handleRelease = () => {
flatlistRef.current.scrollToOffset({ y: -100 });
setTimeout(() => {
flatlistRef.current.scrollToOffset({ y: 0 });
}, 1000)
}
return (
<FlatList
data={data}
renderItem={({ item }) => {
return (
<View style={styles.row}>
<Text style={styles.text}>{item}</Text>
</View>
)
}}
onScroll={onScroll}
scrollEventThrottle={16}
onResponderRelease={handleRelease}
ref={flatListRef}
/>
)
释放后，FlatList应该滚动到偏移 -100 以显示下面的动画，然后在 1 秒后向上滚动。但发生的情况是它滚动到偏移 0（我可以看出，因为我尝试在释放后立即向下滚动，它会立即尝试向上滚动）。
是否可以以编程方式滚动FlatList到负偏移量？
我想通过搜索栏过滤这个简单的平面列表。我该如何编码，以便无论我在输入文本上写什么内容，它都会过滤平面列表？你能帮我完成它吗？
\n\nimport React from \'react\';\nimport { StyleSheet, Text, View, SafeAreaView, TextInput, TouchableOpacity, LayoutAnimation, Image, FlatList, ScrollView } from \'react-native\';\nimport Icon from \'react-native-vector-icons/Ionicons\';\nimport {ListItem, SearchBar} from \'react-native-elements\';\n\nexport default class HomeScreen extends React.Component{\n render() {\n return (\n <View style={styles.container}>\n <View style={styles.header}>\n <Text style={styles.headerTitle}>Home</Text>\n </View>\n <View style={styles.container1}>\n <Icon name={"ios-search"} style={styles.icon}/> \n <TextInput style={styles.inputBox}\n underlineColorAndroid=\'rgba(0,0,0,0)\' \n placeholder="Procura aqui" \n placeholderTextColor = "white"\n selectionColor="black"\n keyboardType="default" \n />\n </View> \n <View style={styles.flatlist}>\n <FlatList\n data = {[\n {key:\'Tiago\'},\n {key:\'Ricardo\'},\n {key:\'Beatriz\'},\n {key:\'Miguel\'},\n {key:\'Sim\xc3\xa3o\'},\n {key:\'David\'}\n ]}\n renderItem={({item}) => …我正在尝试使用这样的 FlatList：
<FlatList
data={vehicles}
horizontal={false}
scrollEnabled
renderItem={({ vehicle}) => <VehicleContainer vehicle={vehicle} />}
keyExtractor={(vehicle: any) => vehicle.numberPlate.toString()}
/>
看起来vehicles像这样：
[{numberPlate: "OL-AL-1336", __typename: "Vehicle"}]
该组件VehicleContainer如下所示：
type VehicleContainerProps = {
vehicle: Vehicle;
};
export const VehicleContainer: React.FunctionComponent<VehicleContainerProps> = ({
vehicle,
}) => {
if (!vehicle) {
return null;
}
return (
<View style={styles.vehicleInfo}>
<Text style={styles.numberPlate}>{vehicle.numberPlate}</Text>
</View>
);
};
但我在 renderItem 的车辆上不断收到错误，这Property 'vehicle' does not exist on type 'ListRenderItemInfo<Vehicle>'是什么ListRenderItemInfo？这不是我自己定义的。我怎样才能解决这个问题？
javascript typescript reactjs react-native react-native-flatlist
我正在开发一个反应本机应用程序，
在这个应用程序中，我有一个捕获视图的图像，如果用户捕获图像，它将存储在状态挂钩中，如果存储了某些内容，它将显示在 Flatlist 中。
如果我们认为用户需要从列表中删除某个项目，那么我提供了一个删除按钮。当用户单击它时，应该从状态中删除该项目并更新 Flatlist。
我的问题是：从状态中删除项目后，我的视图不会重新渲染。我可以保证数据已成功从状态中删除，但我的 Flatlist 没有更新。
我的代码如下，请大家帮我解答一下。提前致谢。
下面的代码用于从状态中删除该项目。
const [selectedFiles, setSelectedFiles] = useState([]);
const removeItemFromArray = (index: number) => {
let imagesArray = selectedFiles;
imagesArray.splice(index, 1);
setSelectedFiles(imagesArray);
}
平面列表
<FlatList
showsHorizontalScrollIndicator={false}
data={selectedFiles}
renderItem={({ item, index }) => {
return (
<ImagePreviewSlider
itemData={item}
viewImage={() => viewImage(index)}
deleteItem={() => removeItemFromArray(index)}
/>
);
}}
/>
----------完整代码--------------
照片上传.tsx
import React, { useState } from "react";
import {
View,
Text,
StyleSheet,
ScrollView,
Image,
ImageBackground,
TouchableOpacity,
Modal,
FlatList
} from "react-native";
import ImagePicker …我正在尝试获取显示具有多列的部分列表。由于部分列表没有开箱即用的功能，我认为为每个部分项目呈现一个平面列表可能是一个好主意..但我没有让它工作。
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { FlatList } from "react-native";
import { SectionList } from "react-native";
class Account extends Component {
data2 =
[
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
data3 =
[
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28adfba',
title: '22--First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91adafa97f63',
title: '22--Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571efadfee29d72',
title: '22--Third …reactjs react-native react-native-flatlist react-native-sectionlist
react-native ×10
reactjs ×5
javascript ×4
expo ×1
flatlist ×1
safeareaview ×1
scroll ×1
search ×1
typescript ×1