如何在reactnative 中从 FlatList 中删除元素索引

发布于12月20日

我有一个作为视图呈现的数据，遇到了一个关于如何删除被扫描的特定索引的问题

我使用了下面的FlatList

render() {
this.leftOpenValue =  Dimensions.get('window').width;
this.rightOpenValue = -Dimensions.get('window').width;

return (   

     <FlatList 
            data = {data}  
            keyExtractor = {data => data.id}                
            renderItem={ ({item}) => (

                <View style={styles.container}>
                    <SwipeView            
                        disableSwipeToRight = {false}
                        renderVisibleContent={() => 
                            <View>
                                <Text style={styles.text}> {item.title} </Text>     // This repeats 9 times (9 Index)              
                            </View>          
                        }
                        renderRightView={() => (
                            <View style={{flex:1, justifyContent: 'flex-end', alignItems: 'center', backgroundColor: 'red'}}>

                            </View>
                        )}

                        leftOpenValue = {this.leftOpenValue}
                        rightOpenValue = {this.rightOpenValue}
                        onSwipedLeft={() => alert("deleted")}
                        swipeDuration = {300}
                        swipeToOpenPercent = {40}
                        disableSwipeToRight = {true}
                    />
                </View>  

            )}
    />
);

我使用Swipeview来滑动(react native Swipeview)并删除flatlist中的索引

我有一个关于如何从平面列表中删除项目的问题

deleteItemById = id => { const filteredData = this.state.data.filter(item => item.id !== id); this.setState({ data: filteredData }); } render() { ... return ( <FlatList data={data} // Assuming this is `this.state.data` keyExtractor={({item}) => item.id} renderItem={({item}) => ( <View style={styles.container}> <SwipeView ... onSwipedLeft={() => this.deleteItemById(item.id)} ... /> </View> )} /> ); }

deleteItemById = id => () => { const filteredData = this.state.data.filter(item => item.id !== id); this.setState({ data: filteredData }); } render() { ... return ( <FlatList data={data} // Assuming this is `this.state.data` keyExtractor={({item}) => item.id} renderItem={({item}) => ( <View style={styles.container}> <SwipeView ... onSwipedLeft={this.deleteItemById(item.id)} ... /> </View> )} /> ); }

如何在reactnative 中从 FlatList 中删除元素索引

推荐答案

React-native相关问答推荐

ReactNative如何在填充编辑表单 timeshift 除按钮禁用状态

NPM INSTALL 在 react-native 项目上失败：无法解析 react 和 react-dom 的依赖树

react-navigation中的React-native android后退按钮

Eslint 错误，configuration for rule "import/no-cycle" is invalid

我可以在状态内有一个函数来响应吗？

如何获取 React Native 应用程序的崩溃日志(log)？

'React native run android' 在模拟器中启动应用程序后立即停止

RNFS.exists() 总是返回 TRUE

React Native 在升级到 0.56 版本后崩溃

如何在 Crashlytics (Fabrics) 中有效地对非致命异常进行分组？

React-Native 应用程序的 Jest 测试 Animated.View

@react-navigation/stack 与 @react-navigation/native-stack 有什么区别？

如何使 React Native Animated.View 可点击？

将 react-native 元素Bundle 为 iOS 框架或 (.aar) Android 库

React Native Image 不显示，我该如何解决？

如何将props传递给 React Navigation 导航器中的组件？

React Native - 为什么执行这个函数？

React-Native ios App 在没有报告的情况下崩溃

仅链接字体的方法

Flatlist getItemLayout 用例