react-native-flatlist 相关问题

FlatList 无法在 Android 上的 React Native 操作表中工作

FlatList 不再可通过操作表滚动。 我按照文档建议从操作表包导入 FlatList，但是当我加载超过 100 个用户的数据时，它崩溃了....

React Native 存在 RTK 查询分页问题

我有一个 React Native 移动应用程序，我正在尝试使用 RTK 查询管理 API 请求。在“产品”屏幕上，我使用 getProducts（无限滚动）获取并显示数据。在显示...

如何使用Flatlist进行导航？

我尝试通过平面列表项目导航屏幕，但未能成功。这是我的代码，出现错误。 Flatlist 有两个元素，即图像、文本，所以我想让它们用于导航......

错误[类型错误：网络请求失败]

我在用于 API 集成的 React Native expo 应用程序 js 文件中收到错误 [TypeError: Network request failed]。在我的 React js Web 开发中使用相同的 API，效果很好。但它没有...

返回屏幕并获取新数据时如何从屏幕刷新平面列表组件（React Native）

我正在尝试制作一个应用程序，您可以在其中创建一些项目，在主屏幕（“ProjectsScreen”）上执行此操作我有一个组件，可以在渲染时从 fetchProjects 获取数据。 该项目...

如何禁用刷新时滚动

我有带刷新控制的平面列表，一切都很好，只是一个问题，刷新时，它自动滚动到页面顶部，这是我不想要的，这是视频，我该怎么办...

表单中react-native-element-dropdown的滚动问题

我目前正在表单中使用react-native-element-dropdown库，当下拉列表聚焦时我遇到滚动问题。问题是这样的： 当我关注下拉菜单时，...

如何将 KeyboardAvoidingView 与 FlatList 结合使用？

我有一个 FlatList 组件，每行内都有一个输入。当我选择输入时，我希望它在键盘上方向上滚动。 我的代码： 返回 （ 我有一个 FlatList 组件，每行内都有一个输入。当我选择输入时，我希望它在键盘上方向上滚动。 我的代码： return ( <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }} > <FlatList style={{ flex: 1, backgroundColor: '#fff' }} data={ds} renderItem={({ item }) => <ListItem data={item} />} ListFooterComponent={this.renderButton} /> </KeyboardAvoidingView> ); 在这种情况下，FlatList 永远不会加载。当我从两个组件中删除 flex:1 时，FlatList 会正确渲染，但选择输入不会使其向上滚动 您可以尝试使用react-native-keyboard-aware-scroll-view https://github.com/APSL/react-native-keyboard-aware-scroll-view 它配备了 KeyboardAware[ScrollView、ListView、SectionView、FlatList]，它接受与来自 RN 的相应组件相同的 props。我用过它，它对我有用。 render() { return ( <KeyboardAwareFlatList style={{flex: 1}} data={this.state.data} renderItem={({item}) => ( <View style={{flex: 1}}> <Image source={item.v} style={{height:200, width: 200}} /> <TextInput placeholder="enter text1" /> </View> )} /> ); } 您可以尝试使用库 react-native-keyboard-spacer 作为 KeyboardAvoidingView 的替代品。 安装： npm install --save react-native-keyboard-spacer 像这样使用它： import KeyboardSpacer from 'react-native-keyboard-spacer' ... <View style={{flex: 1}}> <FlatList style={{flex: 1}} data={ds} renderItem={({ item }) => <ListItem data={item} />} /> {/* The view that will expand to match the keyboard height */} <KeyboardSpacer /> </View> 这个可行，请尝试一下： <KeyboardAvoidingView behavior='position' keyboardVerticalOffset={x} > 您可以删除属性“keyboardVerticalOffset”或保留它并使用 x 的值， 您只需找出适合您情况的值即可。 对于任何与我有相似道路的人。我无法使用 KeyboardAvoidingView，因为它依赖于与 Flatlist 冲突的 ScrollView。我无法在 Flatlist 中使用页眉和页脚选项，因为我将其用作搜索选择框中的生成内容，因此必须包含它。 对我来说，Android 和 iOS 计算绝对位置的方式有所不同。 Android 认为底部是键盘的顶部，iOS 认为键盘显示时底部是屏幕的底部。 事实证明，在 iOS 上将 View 放置在您想要保留在键盘上方的内容周围并动态设置其高度并不困难。这在 Android 上甚至不是真正必要的，因为如果视图是 position: absolute 和 bottom: 0，它会跟随键盘。 这大量借鉴了这里：https://stackoverflow.com/a/60682069/438322 感谢凯文·阿米拉诺夫 这是一个使用钩子的基本示例。 function YourComponent(props){ const onKeyboardWillShow = e => { setKeyboardHeight(e.endCoordinates.height); }; const onKeyboardWillHide = () => { setKeyboardHeight(0); }; useEffect(() => { // These listeners on ios are a little more snappy but not available on Android // If you want to use this on Android use keyboardDidShow/Hide if (Platform.OS === 'ios') { Keyboard.addListener('keyboardWillShow', onKeyboardWillShow); Keyboard.addListener('keyboardWillHide', onKeyboardWillHide); } return () => { if (Platform.OS === 'ios') { Keyboard.removeListener('keyboardWillShow', onKeyboardWillShow); Keyboard.removeListener('keyboardWillHide', onKeyboardWillHide); } }; }, []); const buttonHeight = 50; return( <View> <Content bla={'bla'}/> <View style={{ height: Platform.OS === 'ios' ? keyboardHeight + buttonHeight : buttonHeight, position: 'absolute', bottom: 0 }}> {/* Keep this button above the keyboard */} <Button style={{ height: buttonHeight }}/> </View </View> ) } 进行 2 项更改：- 不要将 FlatList 包装在 KeyboardAvoidingView 中。 将 ListItem 包裹在 KeyboardAvoidingView 中。 不要在 KeyboardAvoidingView 中包含行为和样式。 这是我的解决方案。 inverted={true} 是关键 const dummy = [1,2,3,4,5,6,7,8,9,10] <KeyboardAvoidingView > <FlatList data={dummy.reverse()} inverted={true} /> </KeyboardAvoidingView>

如何使用expo.contacts中的电话号码

我正在创建一个移动应用程序，我想在其中列出我的联系人及其电话号码。 我正在使用 expo 联系人和 flatlist 组件，我想在其中显示联系人姓名和电话号码。 所以，公关...

Flatlist 不可滚动

我正在尝试在我的应用程序中创建一个可滚动网格，但我无法滚动它。尝试了一切，但没有任何效果。 返回 （ 我正在尝试在我的应用程序中创建一个可滚动网格，但我无法滚动它。尝试了一切，但没有任何效果。 return ( <FlatList data={data} renderItem={({item}) => ( <GridImage style={styles.imageThumbnail} imageUri={item} numColumns={3} /> )} /> ); }; 将平面列表包装在视图中并为其指定高度和宽度。 return ( <View style={{ height:600,width:600 }}> <FlatList data={this.state.data} renderItem={({item}) => <Country name={item} />} /> </View> ); 如果父组件已经正确设置了flex样式，则无需设置高度和宽度样式。这就是我们首先使用 Flexbox 的原因。 用 <Pressable> 包裹渲染项目。然后<FlatList>滚动将按预期工作。 在 <TouchableOppacity> 文档页面中有对此的提示。它说它是“使视图正确响应触摸的包装器”。这可能意味着奇怪的是 Views 不能很好地处理触摸。 然后您可以在 Views 内部使用 Pressable。

如何消除水平FlatList中列表项之间的间隙？

在React Native的FlatList中，创建一个水平方向的列表，在Container中，除了FlatList之外，还创建一个宽度为50以下的View。 那么，如果ListItem的宽度...

如何在导航时阻止本机平面列表返回到起始项目

我正在通过向平面列表添加一些动画来构建一个应用程序。但是当我导航到详细信息屏幕时，我遇到了一个问题，上一页转到了开始项目。我希望它留在用户所在的项目...

如何消除水平FlatList中列表项之间的间隙？

在React Native的FlatList中，创建一个水平方向的列表，在Container中，除了FlatList之外，还创建一个宽度为50以下的View。 那么，如果ListItem的宽度...

React Native Modalize - 无法在 Modalize 内滚动 FlatList

我正在将react-native-modalize与flatListProps一起使用，但我无法滚动flatList，我尝试了panGestureEnabled = {false}，或删除了高度样式，但没有一个修复它，这是我的代码： 我将 react-native-modalize 与 flatListProps 一起使用，但我无法滚动 flatList，我尝试过 panGestureEnabled={false}，或删除 height 样式，但没有一个修复它，这是我的代码： <Modalize ref={ref} children={children} adjustToContentHeight={true} onOverlayPress={closeModal} onClosed={onCloseCallback} HeaderComponent={renderHeader} flatListProps={ listData?.length > 0 ? { data: listData, renderItem: renderListItem, ItemSeparatorComponent: renderSeparator, keyExtractor: listKeyExtractor, contentContainerStyle: dStyles.dataList, } : undefined } modalStyle={styles.borderRadius} /> const dStyles = StyleSheet.create({ dataList: { height: 400, }, }); 我检查 listData，数组有 63 个项目，但 flatList 仅渲染前 9 个项目。 通过添加 flatListProps 这些道具来修复： initialNumToRender: 10 maxToRenderPerBatch:10 并添加到 <Modalize 道具 disableScrollIfPossible={false} 我不知道为什么，但height也需要删除。这是新代码： <Modalize ref={ref} children={children} adjustToContentHeight={true} disableScrollIfPossible={false} onOverlayPress={closeModal} onClosed={onCloseCallback} HeaderComponent={renderHeader} flatListProps={ listData?.length > 0 ? { data: listData, renderItem: renderListItem, ItemSeparatorComponent: renderSeparator, keyExtractor: listKeyExtractor, initialNumToRender: 10, maxToRenderPerBatch: 10, } : undefined } modalStyle={styles.borderRadius} /> 正如我提到的，我无法限制 FlatList 的高度，因此如果列表足够长，<Modalize 将展开全屏，这就是此解决方案的限制。 造成这个问题的原因是 调整内容高度={true} 你可以通过这样做来控制它 adjustToContentHeight={listData?.length > 3 ? false : true} “adjustToContentHeight”属性用于控制组件是否根据其内容动态调整其高度。当设置为 false 时，组件的高度保持固定，不会根据其容纳的内容而改变 示例 adjustToContentHeight={false}> ....

如何在react-native中使用ActivityIndicator和FlatList？

我有一个 FlatList 组件，它具有使用 RefreshControl 来处理刷新的刷新控制属性。我如何在这里使用 ActivityIndicator 而不是 RefreshControl。 返回 （ 我有一个 FlatList 组件，它有 refreshControl 属性，使用 RefreshControl 来处理刷新。我如何在这里使用 ActivityIndicator 代替 RefreshControl。 return ( <View style={styles.container}> <FlatList data={data} renderItem={({ item }) => { return renderData(item); }} refreshControl={ <RefreshControl colors={["#9Bd35A", "#689F38"]} refreshing={loading} onRefresh={loadData()} /> } keyExtractor={(item) => `${item.id}`} /> <FAB style={styles.fab} small={false} icon="plus" onPress={() => navigation.navigate("Create")} /> </View> ) <Flatlist data={data} renderItem={({ item }) => {return renderData(item)}} ListEmptyComponent={()=>{ if(loading){ return <ActivityIndicator animating size="large" color="red" /> } return <Text>data is empty</Text> }} refreshControl={<RefreshControl colors={["#9Bd35A", "#689F38"]} refreshing={loading} progressViewOffset={loading?-200:0} onRefresh={()=>{ setData(null); loadData()}} />} />

添加新项目时防止 FlatList 滚动

我的聊天应用程序中有一个倒置的垂直 FlatList，它在底部显示最新消息，在顶部显示最旧的消息（与所有其他聊天应用程序一样） 问题是当我想要...

React-native：如何包装 FlatList 项目

我有一个查询返回的术语列表。每个都是一个单词。目前我的 FlatList 将每个单词渲染到同一行的按钮中（horizontal={true}） 我想要把按钮包起来...

如何启用嵌套在模态框下的 FlatList TouchableWithoutFeedback 的滚动？

这是我的设置： 这是我的设置： <Modal statusBarTranslucent visible={isOpen} onDismiss={onRequestClose} onRequestClose={onRequestClose} animationType={animationPreset}> <TouchableWithoutFeedback onLayout={onLayout} onPressOut={onRequestClose}> <View style={modalContainerStyle}> <TouchableWithoutFeedback> <View style={style.modalChildStyle}> {children} </View> </TouchableWithoutFeedback> </View> </TouchableWithoutFeedback> </Modal> 这是 FlatList 子项： <View> <FlatList data={dataItems} scrollEnabled keyExtractor={(item) => item.id} renderItem={({item}) => (<SomeComponent someComponentData={item} />)} /> </View FlatList 不滚动！ 我尝试将onStartShouldSetResponder={() => true}添加到Views内的Modal以及包裹FlatList的那个，但没有任何效果。我也尝试添加style={{flex: 1}}，但这也不起作用。 这是我解决问题的方法：通过使用具有 renderItem 的 View 将组件包装在 onStartShouldSetResponder={() => true} 中。例如： <FlatList data={dataItems} scrollEnabled keyExtractor={(item, index) => item.id} renderItem={({item}) => ( <View onStartShouldSetResponder={() => true}> <SomeComponent someComponentData={item} key={uuid()} /> </View> )} />

优化 React Native 应用程序以消除不必要的重新渲染

我目前正在开发 React Native 应用程序，并且遇到了与不必要的重新渲染相关的性能问题，特别是在更改父组件中的状态时。我已经采取了...

使用平面列表多选项目

我正在尝试实现一个具有多重选择的平面列表，但是当我按下一个项目时，它会更改所有项目的背景，我该如何解决这个问题？ 状态={ auth用户：[]， selMembe...