Контекстный API с навигацией React (React Native)

Question

Я пытаюсь сосредоточиться на использовании Context в моем приложении React Native, которое использует React Navigation. Я думаю, что я далеко на этом. Я просто пытаюсь передать название книги всему моему приложению через стеки навигации.

Приложение. js

const BookContext = React.createContext();

class BookProvider extends Component {

  state = { 
    name: 'book name' 
  }

  render() {
    return (
      <BookContext.Provider value={{
          name: this.state.name
        }}>

        {this.props.children}
      </BookContext.Provider>
    )
  }

}

export default function App() {
  return (

     <BookProvider>
       <BookContext.Consumer>

         {({ name }) => (<Routes name={name} />)} //my react navigation stacks component

       </BookContext.Consumer>
     </BookProvider>

  );
}

и в Книге. js (компонент в стеке навигации)

componentDidMount() {
    console.log(this.context)
}

возвращает пустой объект {}

Любая помощь приветствуется!

Answer 1

Чтобы сэкономить некоторое количество Google, это правильный подход: https://github.com/react-navigation/react-navigation/issues/935#issuecomment -359675855

Другой способ, если вы используете относительно новую версию React и ваш компонент на данном маршруте речь идет о функциональном компоненте, использующем useContext React hook.

например,

import React, { useContext } from 'react'
import { BookContext } from '/path/to/BookContext'

function BookConsumerComponent() {
  const { name } = useContext(BookContext);

  console.log(name);
}