React Native CLI - 如何正确管理底部Android导航栏颜色？ 浅色模式下的白色/深色模式下的深色？

Question

Here's an image of what I'm referring to, the android emulator is on the left. I can switch my app between light / dark and the components change color on demand but I'm not sure how to approach this bottom navigation bar. Thank you in advance for any tips on this.

Answer 1

The solution was a lot easier than I thought. If you're using React Navigation you can use the screen options prop to define the navigation bar color. Here is an example:

export function AuthStackNavigator() {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <Stack.Navigator
      screenOptions={{ navigationBarColor: isDarkMode ? theme.colors.black : theme.colors.white }}>
      <Stack.Screen name="Landing" component={LandingScreen} options={{ headerShown: false }} />
    </Stack.Navigator>
  );
}