单击添加按钮但导航至显示页面

Question

我想添加而不导航到显示页面，但是当我单击添加按钮时，它会导航到显示页面，然后添加。我的删除按钮也有同样的问题。

它应该运行而无需转到显示页面并停留索引屏幕。

Answer 1

当您将项目添加到状态中时，将触发 FlatList 项目标题中的 onPress 函数。

你可以通过 lambda 表达式摆脱这个问题。

export default function IndexScreen({navigation}){
  const { state, addBlogPost, deleteBlogPost } = useContext(Context);
  return (
    <View>
      <Button title={"Add"} onPress={addBlogPost} />
      <FlatList 
        data={state}
        keyExtractor={(blogPosts) => blogPosts.id}
        renderItem={({item}) => {
          return(
            <View style={StyleSheet.listStyle}>
              <TouchableOpacity onPress={()=> {navigation.navigate("Show")}}>  //Change this onPress method
                <Text style={StyleSheet.title}>{item.title}</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={()=>{deleteBlogPost(item.id)}}>
                <MaterialIcons name="delete" size={24} color="black" />
              </TouchableOpacity>
            </View>
          );
        }}
      />
    </View>
  );
}