React native 如何使用react原生元素中的主题提供程序标记包装appContainer？

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

我在一个没有世博会的项目中工作。我正在导入react本地元素和react导航。我需要附上我的app.js，它已经被appContainer包装好了

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);

---

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

createAppContainer

返回

React Component

。因此，您可以使用任何

提供程序

对其进行包装

从“React”导入React；
从“react native”导入{AppRegistry}；
从“./src/App”导入应用程序；
从“react native elements”导入{ThemeProvider}；
从“/您的主题”导入主题；
从“./app.json”导入{name as appName}；
const ProvidedApp=（）=>{
返回
}
AppRegistry.registerComponent（appName，（）=>ProvidedApp）；

我借用了这篇文章，因为我对杰夫·古康说的话有一个问题

杰夫·古康：“你可以使用任何ThemeProvider”

我正在使用react原生元素中的

来包装createAppContainer返回的组件。主题道具是一个lightTheme或一个暗色主题对象，具体取决于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>
  );
};

const TabNavigator=createMaterialBottomTabNavigator(
{
FindDestination屏幕：{
屏幕：FindDestinationScreen，
导航选项：{
标题：“搜索”，
tabBarIcon:（{tintColor}）=>(
),
},
},
},
{
barStyleDark：{
背景颜色：“212121”，
阴影颜色：“000”，
阴影偏移：{宽度：3，高度：2}，
阴影不透明度：0.8，
阴影半径：2，
立面图：1，
},
barStyleLight：{
背景色：“3c5e82”，
},
错,，
标签：对，
initialRouteName：“FindDestinationScreen”，
activeColor:#E4DC93“，
不活动颜色：“fff”，
barStyle:{背景颜色：“透明”，高度：80，填充顶部：10}，
}
);
const AllRoutes=createSwitchNavigator(
{
个人设置：{
标题：“个人设置”，
屏幕：个性化设置，
标题：（{goBack}）=>({
左：(
{
goBack（）；
}}
/>
),
}),
},
选项卡：{
屏幕：TabNavigator，
},
},
{
initialRouteName:“选项卡”，
}
);
const AppContainer=createAppContainer（所有路由）；
导出默认应用=（）=>{
const[lightthemstate，setlightthemstate]=使用状态（true）；
返回(

我将非常感激任何帮助……谢谢