带React导航的上下文API（React Native）

Question

我试图在使用React Navigation的React Native应用程序中使用Context。我想我还差得远。我只是想通过导航堆栈将一本书的名称传递给我的整个应用程序。

App.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>

  );
}

和Book.js（导航堆栈中的组件）

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

返回一个空对象{}

感谢您的任何帮助！

Answer 1

为了为您节省一些Google搜索，这是正确的方法：https://github.com/react-navigation/react-navigation/issues/935#issuecomment-359675855

另一种方法，如果您使用的是React的相对较新版本，并且该路由处的组件是功能组件，请使用useContext React钩子。

例如

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

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

  console.log(name);
}