【问题标题】:React Navigation switching background colors and styling StackNavigatorReact Navigation 切换背景颜色和样式 StackNavigator
【发布时间】:2017-07-04 19:12:44
【问题描述】:

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

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

【问题讨论】:

    标签: javascript reactjs react-native navigation navigator


    【解决方案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 将帮助您自定义返回按钮。

            【讨论】:

              猜你喜欢
              • 2017-12-06
              • 2019-03-22
              • 2020-05-11
              • 1970-01-01
              • 2013-06-07
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多