react-native - 上下文 API w/ React Navigation (React Native)

Question

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

应用程序.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

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

另一种方法是，如果您使用的是相对较新的 React 版本，并且您在该路线上的相关组件是功能组件，则使用useContextReact 钩子。

例如

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

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

  console.log(name);
}