Question

苦苦挣扎，了解如何更改导航标题栏背景颜色。我使用react navigation和Expo来构建我的应用程序。

backgroundColor似乎没有做任何事情。知道怎么做吗？

我的代码如下：

static navigationOptions = () => ({
    title: 'My App',
    headerTintColor: Colors.DarkBlue,
    backgroundColor: 'red',
    headerLeft:
      <HeaderBarItem to='InfoScreen' title='App info' />,
    headerRight:
      <HeaderBarItem to='FeedbackScreen' title='Feedback' />
  });

Answer 1

这应该有效：

import tkinter as tk

class Options(tk.Frame):

    def __init__(self, master):

        tk.Frame.__init__(self, master, bg='#FFFFFF', relief='ridge', bd=1)

        # Grab the 'Settings' tk.Frame object
        settings_frame = self.master.master.winfo_children()[1].winfo_children()[0]
        self.settings = settings_frame

        self.options()


    def options(self):
        self.label = tk.Label(self, text='List Box')
        self.button1 = tk.Button(self, text='General', command=self.show_general)
        self.button2 = tk.Button(self, text='Future', command=self.show_future)

        self.label.grid(row=0, sticky='nsew', padx=1, pady=1)  # column is set to 0 by default
        self.button1.grid(row=1, sticky='nsew', padx=1, pady=1)
        self.button2.grid(row=2, sticky='nsew', padx=1, pady=1)


    def show_general(self):
        self.settings.future_page.pack_forget()
        self.settings.general_page.pack(fill='both', expand=True)


    def show_future(self):
        self.settings.general_page.pack_forget()
        self.settings.future_page.pack(fill='both', expand=True)


class Settings(tk.Frame):

    def __init__(self, master):

        tk.Frame.__init__(self, master, bg='#FFFFFF', relief='ridge', bd=1)

        self.pages()


    def pages(self):
        self.general_page = tk.Label(self, fg='#FFFFFF', bg='#FF0000',
            relief='ridge', bd=1, text="Hi, I'm General.")
        self.future_page = tk.Label(self, fg='#FFFFFF', bg='#0000FF',
            relief='ridge', bd=1, text="Hi, I'm Future.")

        self.general_page.pack(fill='both', expand=True)


def main():
    root = tk.Tk()
    root.title('Settings')
    root.configure(bg='#DDDDDD', width=500, height=500)
    root.resizable(width=False, height=False)

    main_container = tk.Frame(root, bg='#FFFFFF', width=500, height=500)
    main_container.pack(fill='both', padx=20, pady=20)  # Add some padding to see container difference
    main_container.pack_propagate(False)  # Avoid sizing based on widget contents

    listbox_left = tk.Frame(main_container, bg='#4285F4', width=235)  # Take 15 from both sides for padding
    settings_right = tk.Frame(main_container, bg='#272727', width=235)

    listbox_left.pack(side='left', fill='y', padx=(10, 0), pady=10)
    listbox_left.pack_propagate(False)
    settings_right.pack(side='right', fill='y', padx=(0, 10), pady=10)
    settings_right.pack_propagate(False)

    settings = Settings(settings_right)  # Must be instantiated before Options
    options = Options(listbox_left)

    settings.pack(fill='both', expand=True, padx=2, pady=2)
    options.pack(fill='both', expand=True, padx=2, pady=2)

    root.mainloop()


if __name__ == '__main__':
    main()

Answer 2

将其粘贴到目标屏幕

static navigationOptions = ({ navigation }) => {
   return {
      title: 'Screen Title',
      headerTintColor: 'royalblue',
      headerStyle: {
         backgroundColor: '#fff'
      }
   }
}

Answer 3

我在整个论坛上都尝试了许多答案，但是找不到有效的解决方案。最后，以下内容对我有用，如果您使用的是最新的RN，则将对您有用：

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
            name="Home"
            component={Main}
            options={{ title: 'Welcome', headerStyle: {
              backgroundColor: '#e7305b'
           } }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Answer 4

您可以在视图组件中使用

<StatusBar backgroundColor = '#fff' />

这对我来说对android有用了

当然不要忘记从'react-native'导入 StatusBar

更改导航标题背景颜色

4 个答案: