React Native：将上下文传递给提供者构造函数

Question

我已经为我的 React Native 项目导入了 ui-kitten。我正在关注 docs 并注意到它们具有修改主题的功能。在我的 App.js 中，我还声明了导航器以及提供程序。我怎样才能让我的应用程序中的 screen/component 可以访问 <ApplicationProvider theme={theme}> 中的 theme 的值？

App.js:
// ui-kitten
import { ApplicationProvider, IconRegistry } from '@ui-kitten/components';
import { mapping, light as lightTheme, dark as darkTheme } from '@eva-design/eva';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
...
// our app export:
export default () => {
<Provider1>
  <Provider2, etc>
     <ApplicationProvider mapping={ mapping } theme={ darkTheme }>
       <IconRegistry icons={ EvaIconsPack }/>
       <App ref={ (navigator) => {
         setNavigator(navigator)
        } }/>
     </ApplicationProvider>
  </Provider2, etc>
</Provider1>

我已经尝试创建 ThemeContext：

export default () => {
const { setTheme } = useContext(ThemeContext);
<Provider1>
  <Provider2, etc>
     <ApplicationProvider mapping={ mapping } theme=setTheme>
       <IconRegistry icons={ EvaIconsPack }/>
       <App ref={ (navigator) => {
         setNavigator(navigator)
        } }/>
     </ApplicationProvider>
  </Provider2, etc>
</Provider1>

Answer 1

这取决于您在 ThemeContext.Provider 中传递的值。按照本指南，您可以使用代表主题键的字符串，但您也可以将主题作为对象传递并执行如下操作：const { theme } = React.useContext(ThemeContext);