React Navigation 切换背景颜色和样式 StackNavigator

Posted 2023-02-23

【中文标题】React Navigation 切换背景颜色和样式 StackNavigator

【英文标题】：React Navigation switching background colors and styling StackNavigator

【发布时间】：2017-07-04 19:12:44

【问题描述】：

我是 React Native 的新手，但我有一个简单的工作应用程序，包含三个场景。我以前使用过 Navigator，但感觉很慢，很高兴尝试 React Navigation（如https://reactnavigation.org/）。实施 React Navigation 后，我的背景颜色从白色变为灰色，从灰色变为白色。这很奇怪，不应该相关。但是我没有改变我的风格。我只实现了新的导航并且颜色改变了。当我回到 Navigator 时，我的颜色又回来了。我正在使用 StackNavigator。有没有其他人遇到过这种奇怪的现象？

或者更好的问题是：如何在 React Navigation 的 StackNavigator 中设置标题和背景颜色的样式？

【参考方案1】：

要在 React Navigation 中设置标题的样式，请在 navigationOptions 对象中使用标题对象：

static navigationOptions =   
  header: 
    titleStyle: 
     /* this only styles the title/text (font, color etc.)  */
    ,
    style: 
     /* this will style the header, but does NOT change the text */
    ,
    tintColor: 
      /* this will color your back and forward arrows or left and right icons */
    
  

要设置backgroundColor 的样式，您只需在应用中设置backgroundColor，否则您将获得默认颜色。

更新！！从 2017 年 5 月 beta9 开始，navigationOptions 现在是平的

你可以read about the breaking change here

您需要从标头对象中删除对象键。另外，请注意它们已被重命名。

static navigationOptions = 
   title: 'some string title',
   headerTitleStyle: 
      /*  */
   ,
   headerStyle: 
      /*  */
   ,
   headerTintColor: 
      /*  */
   ,

【参考方案2】：

这是我用来更改卡片背景颜色和标题背景和字体颜色的示例。

/*
1. Change React Navigation background color.
- change the style backgroundColor property in the StackNavigator component
- also add a cardStyle object to the Visual options config specifying a background color
*/

//your new background color
let myNewBackgroundColor = 'teal';

const AppNavigator = StackNavigator(
  SomeLoginScreen: 
    screen: SomeLoginScreen
  
, 
      headerMode: 'screen', 
      cardStyle: backgroundColor: myNewBackgroundColor
   
);

//add the new color to the style property
class App extends React.Component 
  render() 
    return ( 
        <AppNavigator style = backgroundColor: myNewBackgroundColor ref=nav => this.navigator = nav;/>
    );
  


/*
2. Change React Navigation Header background color and text color.
- change the StackNavigator navigationOptions 
*/

/*
its not clear in the docs but the tintColor 
changes the color of the text title in the 
header while a new style object changes the 
background color.
*/


//your new text color
let myNewTextColor = 'forestgreen';

//your new header background color
let myNewHeaderBackgroundColor = 'pink';

const AppNavigator = StackNavigator(
  SomeLoginScreen: 
    screen: SomeLoginScreen,
    navigationOptions: 
      title: 'Register',
      header: 
        tintColor: myNewTextColor,
        style: 
          backgroundColor: myNewHeaderBackgroundColor
        
      ,
    
  
, 
     headerMode: 'screen',
     cardStyle:backgroundColor:'red'
   
);

【讨论】：

可能是更好的答案，因为它适用于整个堆栈。

【参考方案3】：

使用以下代码创建自定义导航标题

static navigationOptions = 
          title: 'Home',
          headerTintColor: '#ffffff',
          headerStyle: 
            backgroundColor: '#2F95D6',
            borderBottomColor: '#ffffff',
            borderBottomWidth: 3,
          ,
          headerTitleStyle: 
            fontSize: 18,
          ,
      ;

【参考方案4】：

试试这个代码。

 static navigationOptions = 
        title: 'KindleJoy - Kids Learning Center',
        headerTintColor: '#ffffff',
        /*headerBackground: (
            <Image
                style=StyleSheet.absoluteFill
                source=require('./imgs/yr_logo.png')
            />
        ),*/
        headerStyle: 
            backgroundColor: '#1d7110',
            borderBottomColor: 'black',
            borderBottomWidth: 0,
        ,
        headerTitleStyle: 
            fontSize: 18,
        
    ;

【参考方案5】：

我认为react-navigation 5 中的上述答案都不适用于我，所以我将其作为自己的解决方案并与您分享

刚刚在react-navigation 5 中更改了theme 的背景，您就可以开始了。

import React from 'react';
import  NavigationContainer, DefaultTheme  from '@react-navigation/native';

const MainNavigator = () => 
  const MyTheme = 
    ...DefaultTheme,
    colors: 
      ...DefaultTheme.colors,
      background: '#FFF',
    ,
  ;

  return (
    <NavigationContainer theme=MyTheme>
      ...
    </NavigationContainer>
  );
;

export default MainNavigator;

https://reactnavigation.org/docs/themes/

【参考方案6】：

好吧，没有什么对我有用，所以我设法找到了自己的解决方案

static navigationOptions = ( navigation, screenProps ) => (
        headerLeft: (
              <NavBackButton onPress=() =>  navigation.goBack();  />
        ),headerStyle: 
            backgroundColor: CLColors.MAIN_BLUE
        , 
        headerTitle: <Text style=[CLStyles.H6MEDIUM_WHITE, marginLeft:8]>Profile</Text>
        , footer: null,
     );

headerTitle 会神奇地在这里放置一个自定义的Text 元素。

headerStyle 会神奇地改变导航栏的背景颜色。

headerLeft 将帮助您自定义返回按钮。