我们是否需要在 Native Base - React Native 中使用 NativeBaseProvider 包装所有屏幕？

Question

例如，我这里有 3 个屏幕：

1. AuthScreen
2. 主屏幕
3. 登录屏幕

---

AuthScreen.js、HomeScreen.js、LoginScreen.js 并在里面有各自的内容。它们被<Stack.Navigator> 调用，如图所示in the link here

<NativeBaseProvider>
.
.
.
</NativeBaseProvider>

有没有一种方法可以让我只写一次NativeBaseProvider 而不必在每个屏幕上都写一次？

Answer 1

NativeBaseProvider 是一个让主题在整个应用程序中可用的组件。它使用 React 的 Context API。将 NativeBaseProvider 添加到 应用的根目录 并更新 App.js，如下所示：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NativeBaseProvider } from 'native-base';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
   <NativeBaseProvider>
     <NavigationContainer>
       <Stack.Navigator>{/* ... */}</Stack.Navigator>
     </NavigationContainer>
    </NativeBaseProvider>
  );
}