通过主题设置导航栏的背景颜色以响应本机应用程序

Question

我正在尝试通过 ThemeProvider 为我的应用设置导航栏背景颜色。我应该针对哪个组件来设置样式。

    import { ThemeProvider } from "react-native-elements";
    const theme = {
      ListItem: {
        titleStyle: { fontSize: 30, color: "red" },
        subtitleStyle: { color: "#336699", fontStyle: "italic" }
      },
      Header: {
        backgroundColor: "blue",
        color: "red"
      }
    };

应用程序组件的渲染：

render(){
    return (
      <ThemeProvider theme={theme}>
        <AppNavigator />
      </ThemeProvider>
    );
}

可以看到列表项样式，但是header没有设置背景色。如果我更改屏幕的导航选项，我可以在那里手动设置颜色。但我想避免在每个屏幕上都这样做。

HomeScreen.navigationOptions = ({ navigation }) => {
  return {
    title: "Title",
    headerStyle: {
      backgroundColor: "red"
    }
  };
};

Answer 1

我在配置导航时能够做到这一点。通过 React Navigator 的 createStackNavigator 设置导航时，有一个名为 defaultNavigationOptions 的选项可用于设置通用样式。 class 中我设置堆栈导航器的相关代码。

//common styling
const defaultNavigationOptions = {
  headerStyle: {
    backgroundColor: "#00f"
  },
  headerTintColor: "#fff",
  headerTitleStyle: {
    fontWeight: "bold"
  }
};

//override the createStackNav 
const createStackNavCustom = screens =>
  createStackNavigator(screens, { defaultNavigationOptions }, config);

//create stacks
const HomeStack = createStackNavCustom({
  Home: HomeScreen,
  AboutEvent: EventDetailsScreen
});

const AboutStack = createStackNavCustom({
  About: AboutScreen,
  Help: HelpScreen
});

文档在这里：https://reactnavigation.org/docs/en/headers.html#sharing-common-navigationoptions-across-screens

通过主题设置导航栏的背景颜色以响应本机应用程序

Set background color of nav bar via theme for react native app

react-native

react-native-navigation

react-native-elements