如何用 react-native-elements 中的主题提供程序标签包装 appContainer？答案

【问题标题】：How to wrap appContainer with a theme provider tag from react-native-elements?如何用 react-native-elements 中的主题提供程序标签包装 appContainer？
【发布时间】：2019-11-12 08:56:45
【问题描述】：

我需要用 ThemeProvider 标记将我的应用程序主组件括起来，但我不知道在哪里将其括起来，因为我使用的是 react-navigation 中的 appContainer，看起来我需要将 appContainer 括起来。

我正在一个没有博览会的 react-native 项目中工作。我正在导入 react-native-elements 和 react-navigation。我需要附上已经被 appContainer 包装的 app.js

App.js

import { createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
import PantallaInicio from './components/home/PantallaInicio';
import PantallaLogin from './components/auth/PantallaLogin';
import PantallaRegistro from './components/auth/PantallaRegistro';
import PantallaCargando from './components/auth/PantallaCargando';

const AppStack = createStackNavigator({ Home: PantallaInicio, });
const AuthStack = createStackNavigator({ Login: PantallaLogin, Registro: PantallaRegistro });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: PantallaCargando,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }

));

index.js

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

抱歉，我还没有任何输出，感谢您的宝贵时间。

【问题讨论】：

标签： react-native user-interface react-navigation react-native-elements

【解决方案1】：

createAppContainer 返回React Component。因此，您可以使用任何 provider 包装它。

import React from 'react';
import {AppRegistry} from 'react-native';
import App from './src/App';
import { ThemeProvider } from 'react-native-elements';
import theme from './your-theme';
import {name as appName} from './app.json';

const ProvidedApp = () => {
  return <ThemeProvider theme={theme} ><App /></ThemeProvider>
}

AppRegistry.registerComponent(appName, () => ProvidedApp);

【讨论】：

【解决方案2】：

我有点借用这个帖子来解决我对 Jeff Gu Kang 所说的问题..

Jeff Gu Kang：“你可以使用任何 ThemeProvider”

我正在使用来自 react-native-elements 的 <ThemeProvider/> 包装 createAppContainer 返回的组件。主题道具是 lightTheme 或 darkTheme 对象，具体取决于 lightThemeState。

通过screenProps，我发送了一个屏幕组件可以用来将主题从浅色变为深色的功能。但是屏幕没有更新......如果我将lightThemeNav 的状态更改为false，一切都会改变并且工作正常，但由于某种原因，当我切换按钮时它不会更新主题。（按钮正确更改状态）

代码如下：


const TabNavigator = createMaterialBottomTabNavigator(
  {
    FindDestinationScreen: {
      screen: FindDestinationScreen,
      navigationOptions: {
        title: "Search",
        tabBarIcon: ({ tintColor }) => (
          <SafeAreaView>
            <Icon
              style={[{ color: tintColor }]}
              size={25}
              name={"ios-search"}
            />
          </SafeAreaView>
        ),
      },
    },
  },
  {
    barStyleDark: {
      backgroundColor: "#212121",
      shadowColor: "#000",
      shadowOffset: { width: 3, height: 2 },
      shadowOpacity: 0.8,
      shadowRadius: 2,
      elevation: 1,
    },
    barStyleLight: {
      backgroundColor: "#3c5e82",
    },
    shifting: false,
    labeled: true,
    initialRouteName: "FindDestinationScreen",
    activeColor: "#E4DC93",
    inactiveColor: "#fff",
    barStyle: { backgroundColor: "transparent", height: 80, paddingTop: 10 },
  }
);

const AllRoutes = createSwitchNavigator(
  {
    PersonalSettings: {
      title: "Personal Settings",
      screen: PersonalSettings,
      header: ({ goBack }) => ({
        left: (
          <Icon
            name={"chevron-left"}
            onPress={() => {
              goBack();
            }}
          />
        ),
      }),
    },
    Tabs: {
      screen: TabNavigator,
    },
  },
  {
    initialRouteName: "Tabs",
  }
);

const AppContainer = createAppContainer(AllRoutes);

export default App = () => {
  const [lightThemeState, setLightThemeState] = useState(true);

  return (
      <ThemeProvider theme={lightThemeState ? lightTheme : darkTheme}>
        <AppContainer
          theme={lightThemeState ? "light" : "dark"}
          screenProps={{
            setLightThemeState: setLightThemeState,
          }}
        />
      </ThemeProvider>
  );
};

我也在这里更详细地提出了一个问题.. changing theme with react native elements not working?

将不胜感激任何帮助.. 谢谢！

【讨论】：