TypeError：navigation.state.params。反应本机

Question

在这里，我已经使用Redux来管理状态，但是我遇到这种类型的错误：TypeError：navigation.state.params.AddBlack不是一个函数。 （在'navigation.state.params.AddBlack（{ noteTitle：noteTitle， noteValue：noteValue }）'，'navigation.state.params.AddBlack'未定义）

ViewBlacks.js

import React from 'react'
import { Button, StyleSheet, View, FlatList } from 'react-native'
import { Text, FAB, List } from 'react-native-paper'
import { useSelector, useDispatch } from 'react-redux'
import { addblack, deleteblack } from '../redux/notesApp'

import Header from '../components/Header'

function ViewBlacks({ navigation }) {
  const blacks = useSelector(state => state.number)
  const dispatch = useDispatch()
  const addBlack = black => dispatch(addblack(black))
  const deleteBlack = id => dispatch(deleteblack(id))

  return (
    <>
      <Header titleText='Simple Note Taker' />
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <View style={styles.container}>
        {blacks.length === 0 ? (
          <View style={styles.titleContainer}>
            <Text style={styles.title}>You do not have any notes</Text>
          </View>
        ) : (
          <FlatList
            data={blacks}
            renderItem={({ item }) => (
              <List.Item
                title={item.black.noteTitle}
                description={item.black.noteValue}
                descriptionNumberOfLines={1}
                titleStyle={styles.listTitle}
                onPress={() => deleteBlack(item.id)}
              />
            )}
            keyExtractor={item => item.id.toString()}
          />
        )}
        <FAB
          style={styles.fab}
          small
          icon='plus'
          label='Add new note'
          onPress={() =>
            navigation.navigate('AddBlacks', {
                addBlack
            })
          }
        />
      </View>
    </>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingHorizontal: 10,
    paddingVertical: 20
  },
  titleContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1
  },
  title: {
    fontSize: 20
  },
  fab: {
    position: 'absolute',
    margin: 20,
    right: 0,
    bottom: 10
  },
  listTitle: {
    fontSize: 20
  }
})

export default ViewBlacks

AddBlack.js

import React, { useState } from 'react'
import { View, StyleSheet } from 'react-native'
import { IconButton, TextInput, FAB } from 'react-native-paper'
import Header from '../components/Header'

function AddBlack({ navigation }) {
  const [noteTitle, setNoteTitle] = useState('')
  const [noteValue, setNoteValue] = useState('')

  function onSaveNote() {
    navigation.state.params.addBlack({ noteTitle, noteValue })
    navigation.goBack()
  }
  return (
    <>
      <Header titleText='Add a new note' />
      <IconButton
        icon='close'
        size={25}
        color='white'
        onPress={() => navigation.goBack()}
        style={styles.iconButton}
      />
      <View style={styles.container}>
        <TextInput
          label='Add Title Here'
          value={noteTitle}
          mode='outlined'
          onChangeText={setNoteTitle}
          style={styles.title}
        />
        <TextInput
          label='Add Note Here'
          value={noteValue}
          onChangeText={setNoteValue}
          mode='flat'
          multiline={true}
          style={styles.text}
          scrollEnabled={true}
          returnKeyType='done'
          blurOnSubmit={true}
        />
        <FAB
          style={styles.fab}
          small
          icon='check'
          disabled={noteTitle == '' ? true : false}
          onPress={() => onSaveNote()}
        />
      </View>
    </>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingHorizontal: 20,
    paddingVertical: 20
  },
  iconButton: {
    backgroundColor: 'rgba(46, 113, 102, 0.8)',
    position: 'absolute',
    right: 0,
    top: 40,
    margin: 10
  },
  title: {
    fontSize: 24,
    marginBottom: 20
  },
  text: {
    height: 300,
    fontSize: 16
  },
  fab: {
    position: 'absolute',
    margin: 20,
    right: 0,
    bottom: 0
  }
})

export default AddBlack

notesReducer.js

import remove from 'lodash.remove'

// Action Types

export const ADD_NOTE = 'ADD_NOTE'
export const DELETE_NOTE = 'DELETE_NOTE'
export const ADD_BLACK = 'ADD_BLACK'
export const DELETE_BLACK = 'DELETE_BLACK'

// Action Creators

let noteID = 0
let blackID = 0

export function addnote(note) {
  return {
    type: ADD_NOTE,
    id: noteID++,
    note
  }
}

export function deletenote(id) {
  return {
    type: DELETE_NOTE,
    payload: id
  }
}

export function addblack(black) {
  return {
    type: ADD_BLACK,
    id: blackID++,
    black
  }
}

export function deleteblack(id) {
  return {
    type: DELETE_BLACK,
    payload: id
  }
}

// reducer
const INITIAL_STATE = {
  note: [],  // for holds notes
  number: []  // for holds numbers
};

function notesReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case ADD_NOTE:
      return {
        ...state,
        note: [
          ...state.note,
          {
              id: action.id,
              note: action.note
          }
       ]
      };

      case DELETE_NOTE:
        const note = remove(state.note, obj => obj.id != action.payload);
  
        return {...state, note};

    case ADD_BLACK:
      return {
        ...state,
        number: [
            ...state.number,
            {
              id: action.id,
              number: action.number
            }
        ]
      };

      case DELETE_BLACK:
        const number = remove(state.number, obj => obj.id != action.payload);
 
        return {...state, number}

    default:
      return state
  }
}

export default notesReducer