时间戳

首页 > 解决方案 > 通过主题设置导航栏的背景颜色以响应本机应用程序

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

问题描述

我正在尝试通过 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 ：

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

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

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

标签： react-nativereact-native-navigationreact-native-elements

解决方案

在配置导航期间，我能够做到这一点。通过 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

推荐阅读