react-native-flatlist 相关问题

当两个嵌套的 VirtualizedList 具有相同方向时，无法以编程方式滚动

所以这是我的问题，我在滚动视图中有一个sectionList组件，并且遇到了这个错误 所以这是我遇到的问题，我在滚动视图中有一个sectionList组件，并且遇到了这个错误 <ScrollView> <HomeHeader QuickAccess={QuickAccess} handleFilterPresentModalPress={handleFilterPresentModalPress} /> <MenuTab sectionListData={sectionListData} /> ***--->SectionList*** </ScrollView> 因此，为了避免我使用平面列表作为容器，现在我有一个嵌套在平面列表中的部分列表 <FlatList nestedScrollEnabled={true} onScroll={handleScroll} scrollEventThrottle={16} data={dummyData} keyExtractor={(item, index) => `key-${index}`} ListHeaderComponent={ <HomeHeader QuickAccess={QuickAccess} handleFilterPresentModalPress={handleFilterPresentModalPress} /> } ListFooterComponent={<View style={{ height: 10 }}></View>} renderItem={({ item, index }) => ( <MenuTab sectionListData={sectionListData} /> ***---> SectionList*** )} /> 但是现在当我以编程方式尝试将节列表滚动到某个标题时，我收到此错误 我也尝试在平面列表上添加nestedScrollEnabled，但没有成功 const scrollToSection = (sectionTitle) => { if (sectionListRef.current) { const sectionIndex = data.findIndex( (section) => section.title === sectionTitle ); if (sectionIndex >= 0) { sectionListRef.current.scrollToLocation({ sectionIndex: sectionIndex, itemIndex: 0, viewOffset: 0, animated: true, }); } } }; <TouchableOpacity onPress={() => scrollToSection("Sides")}> <Text>Scroll to Section 2, Item 2</Text> </TouchableOpacity> 对此的任何帮助或指导将不胜感激，提前致谢 世博小吃 所以我的问题是部分列表位于平面列表内。我使用 flatlist 作为主要容器。现在我将sectionList移到了外面，它可以工作了，谢谢@marcelofreiries

FlatList 无法在 Android 上的 BottomSheet 中工作

我正在使用 gorhom/react-native-bottom-sheet 我面临的问题： 我在 BottomSheet 中有一个 FlatList，我可以在 ios 上滚动 FlaLlist，但它在 android 上不起作用。

父组件未正确将 props 传递给子组件

我有这个父组件： const 父 = () => { const [头像，编辑头像] = useState({ 配饰， 背景颜色， 背景形状， 身体， 衣服， 服装颜色、 眉毛，

显示键盘后滚动到 FlatList 末尾

我在 KeyboardAvoidingView 中有一个 FlatList。当显示键盘时，我想滚动到 FlatList 的末尾。 我正在监听“keyboardDidShow”事件，它确实得到了...

ReactNative Flatlist onEndReached 不起作用

我尝试在 FlatList 的 onEndReached 上调用函数，但它不起作用。 我在最后调用 this.state.pageNo 并且它没有更新。我想稍后在无限滚动中使用这个逻辑...

打开键盘时如何使列表保持在同一元素上？

我正在开发一个聊天应用程序，我希望当键盘打开时，直接位于输入上方的元素保持在输入上方。但现在，即使 Android 键盘移动内容，列表也不会移动

我们如何根据 React Native 中的列表项内容为 FlatList 设置自动高度

我在我的组件中使用 FlatList，它工作正常。所需要的是我的整个屏幕应该有一个自动高度，并且 FlatList 内容永远不会超出屏幕高度。 阿尔...

FlatList 内的 TextInput

描述 从下面的示例代码来看，FlatList 返回 n 个 TextInput，当在特定 TextInput 上输入值时，它会不断重新渲染所有其他 TextInput。 示例代码 描述 从下面的示例代码中，FlatList 返回 n 个 TextInput，当在特定 TextInput 上输入值时，它会不断重新渲染所有其他 TextInput。 示例代码 <FlatList ........... renderItem ={this.renderItem} /> renderItem=(item)=>{ <Text>{item.name}</Text> <TextInput ......... onChangeText ={(text)=>this.setState({text})} value={this. state.text} /> } 解决方案 我尝试为 TextInput 分配一个键，但不知道如何操作 更新：添加完整示例 您需要将文本输入状态维护为数组来存储每个文本输入的值 import React, { Component } from 'react'; import { View, Text, FlatList, TouchableOpacity, TextInput, } from 'react-native'; export class Demo extends Component { state = { textInputs: [], }; render() { return ( <View style={{ flex: 1, marginTop: 20 }}> <FlatList style={{ flex: 1 }} data={[1, 2, 3, 4, 5]} renderItem={({ item, index }) => { return ( <View style={{ height: 100, backgroundColor: '#F0F0F0', width: 300, alignSelf: 'center', margin: 10, }} > <TextInput style={{ flex: 1, backgroundColor: '#C0C0C0', }} onChangeText={text => { let { textInputs } = this.state; textInputs[index] = text; this.setState({ textInputs, }); }} value={this.state.textInputs[index]} /> <TouchableOpacity style={{ backgroundColor: 'red', flex: 1, alignItems: 'center', justifyContent: 'center', }} onPress={() => { let { textInputs } = this.state; textInputs[index] = ''; this.setState({ textInputs, }); }} > <Text> Clear</Text> </TouchableOpacity> </View> ); }} /> </View> ); } } 只需从 value 中删除 TextInput 属性，但这不是解决方案，因为该值仅存储到单个状态中，因此如果您想获取多个文本输入的值，则必须创建 rowrender 和状态数组 <TextInput ......... onChangeText ={(text)=>this.setState({text})} //value={this. state.text} />

FlatList 项中的文本输入

我遇到了如下图所示的问题： 文本 正如你们所看到的，我有每件商品的信息：名称和库存。现在我想通过在文本输入中输入数字来更新单个商品的库存但是当我输入 3 我...

FlatList 不渲染图像

我已经反应本机代码来显示购物车图像列表，当用户导航到 PaymentScreen 时，屏幕应该显示购物车项目列表，为此我在 FlatList 之前使用了 FlatList

在 UIManager 中找不到“RCTScrollContentView”

不变违规：requireNativeComponent：在 UIManager 中找不到“RCTScrollContentView”。 ...

React Native FlatList 带列，最后一项宽度

我使用 FlatList 在两列中显示项目列表 项目.id } 渲染项={(...

在Android中隐藏FlatList（React Native）中的滚动条

我正在尝试在我的应用程序中使用 FlatList （React-native）。我水平使用它并且可以看到滚动条。 ScrollView 中有一个隐藏滚动条的选项，但 FlatList 中没有。有人去过吗

如何在 React Native 中使用 FlatList 滚动到按钮上的下一个项目？

我有一个月份数组，我用它来使用水平 FlatList 显示月份。我希望使用 2 个按钮来更改月份，这两个按钮是前进按钮，以递增顺序更改月份...

突出显示 React-Native FlatList 中的选定项目

我编写了一个简单的 React-native 应用程序来从远程服务获取数据，并将其加载到 FlatList 中。当用户点击某个项目时，该项目应突出显示并保留选择。 ...

平面列表中的点击监听器

如何在 Flatlist 中添加点击监听器？ 我的代码： 渲染项目（{项目，索引}）{ 返回 如何在Flatlist中添加点击监听器？ 我的代码： renderItem({item, index}){ return <View style = {{ flex:1, margin: 5, minWidth: 170, maxWidth: 223, height: 304, maxHeight: 304, backgroundColor: '#ccc', }}/> } render(){ return(<FlatList contentContainerStyle={styles.list} data={[{key: 'a'}, {key: 'b'},{key:'c'}]} renderItem={this.renderItem} />); } } 更新 1：我使用了按钮，但它在 Flatlist 中不起作用。然而，仅使用按钮而不是Flatlist，它就可以工作。为什么它在 Flatlist renderItem 中不起作用？ _listener = () => { alert("clicked"); } renderItem({item, index}){ return<View> <Button title = "Button" color = "#ccc" onPress={this._listener} /> </View> } 我用过TouchableWithoutFeedback。为此，您需要将所有 renderItem 元素（即您的行）添加到 TouchableWithoutFeedback 中。然后添加 onPress 事件并将 FaltList 项传递给 onPress 事件。 import {View, FlatList, Text, TouchableWithoutFeedback} from 'react-native'; render() { return ( <FlatList style={styles.list} data={this.state.data} renderItem={({item}) => ( <TouchableWithoutFeedback onPress={ () => this.actionOnRow(item)}> <View> <Text>ID: {item.id}</Text> <Text>Title: {item.title}</Text> </View> </TouchableWithoutFeedback> )} /> ); } actionOnRow(item) { console.log('Selected Item :',item); } 您需要将 row 元素（在 renderItem 方法内）包装在 <TouchableWithoutFeedback> 标签内。 TouchableWithoutFeedback 将 onPress 作为你可以提供 onPress 事件的道具。 对于TouchableWithoutFeedback请参阅此链接 我用过TouchableOpacity。而且效果很好。这将为您提供点击反馈。 TouchableWithoutFeedback 不会提供。我做了以下事情： import { View, Text, TouchableOpacity } from "react-native"; 。 。 . _onPress = () => { // your code on item press }; render() { <TouchableOpacity onPress={this._onPress}> <View> <Text>List item text</Text> </View> </TouchableOpacity> } 如果您面临平面列表行首次点击问题 请将以下属性添加到平面列表中。 disableScrollViewPanResponder = {true} Pressable 组件现在优于 TouchableWithoutFeedback（和 TouchableOpacity）。根据 React Native 文档 TouchableWithoutFeedback: 如果您正在寻找更广泛且面向未来的方法来处理基于触摸的输入，请查看 Pressable API。 实现示例： import { Pressable } from "react-native"; render() { return( <FlatList contentContainerStyle={styles.list} data={[{key: 'a'}, {key: 'b'}, {key:'c'}]} renderItem={({item}) => ( <Pressable onPress={this._listener}> // BUILD VIEW HERE, e.g. this.renderItem(item) </Pressable> )} /> ); } 参考文献 TouchableWithoutFeedback（React Native）：https://reactnative.dev/docs/touchablewithoutfeedback Pressable（React Native）：https://reactnative.dev/docs/pressable 您不需要将 Touchable 相关组件添加到 Flatlist renderItem 中。只需将 onTouchStart 属性传递到您的 Flatlist 即可。 示例： <FlatList style={themedStyles.flatListContainer} data={translations} renderItem={renderItem} keyExtractor={(item, index) => `${item.originalText}____${index}`} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} ListEmptyComponent={renderEmptyListComponent} onTouchStart={onBackgroundPressed} />

React-native 平面列表项目在更改尺寸时消失

我正在为android开发一个react-native的直播应用程序。导演视图可显示最多 3 名摄影师的实时流。 我正在使用 FlatList 水平显示它们，这样...

react-native-dropdown-picker 滚动在另一个滚动中不起作用

下拉滚动在react-native-dropdown-picker中的另一个滚动内不起作用 我已经尝试过给予 列表模式=“滚动视图” 滚动视图属性={{ 嵌套滚动启用：真， ...

React Native Expo 垂直滚动

尝试在帖子部分实现垂直滚动视图，但只有当我首先触摸“你想做什么”部分时才有效，有没有办法使滚动条可见？...

如何在React Native中添加模糊效果？

如何在 React Native 中为视图添加模糊，就像我们将其应用于图像或背景图像一样？如果视图具有使用 RGBA 的半透明背景，我还想为其添加模糊。 示例代码 <