0

我已经为我的 react native 项目导入了 ui-kitten。我正在关注文档并注意到它们具有修改主题的功能。在我的 App.js 中，我还声明了导航器以及提供程序。如何使我的应用程序中的屏幕/组件可以访问themein的值？<ApplicationProvider 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>
4

1 回答 1

1

这取决于您传入的值ThemeContext.Provider。通过遵循本指南，您可以使用表示主题键的字符串，但您也可以将主题作为对象传递并执行以下操作const { theme } = React.useContext(ThemeContext)：

于 2020-02-13T07:36:38.647 回答