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

【问题标题】：Set background color of nav bar via theme for react native app通过主题设置导航栏的背景颜色以响应本机应用程序
【发布时间】：2019-08-04 19:19:42
【问题描述】：

我正在尝试通过 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"
      }
    };

App 组件的渲染：

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

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

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

【问题讨论】：

您打算使用的模块是反应导航中的模块，而不是元素中的模块。因此，将无法访问样式。
请参考react-native-training.github.io/react-native-elements/docs/…

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

【解决方案1】：

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

//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

【讨论】：