React导航切换背景颜色和样式stacknavigator

Question

我是对本机反应的新手，但是我有一个简单的工作应用程序，带有三个场景。我以前在使用导航器，但感觉很懒惰，很高兴尝试进行反应导航（如https://reaectnavigation.org/）。实施了反应导航后，我的背景颜色从白色转变为灰色，什么是灰色。这很奇怪，不应该有关系。但是我没有改变自己的样式。我只实施了新的导航，颜色改变了。当我回到导航器时，我的颜色返回。我正在使用stacknavigator。还有其他人遇到过这种奇怪的现象吗？

或一个更好的问题是：如何在React Navigation的stacknavigator中为标头和背景颜色设计？

Answer 1

为react导航中的标头设计使用导航对象内的标头对象：

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现在是Flat

您可以在此处阅读有关打破变化的信息

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

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

Answer 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'
   }
});

Answer 3

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

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

Answer 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,
        }
    };

Answer 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://reaectnavigation.org/docs/themes/

Answer 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将帮助您自定义返回按钮。

Answer 7

在堆栈导航器中您可以使用contentStyle.backgroundColor进行更改，如下面的语法

<Stack.Navigator screenOptions={{ contentStyle: {backgroundColor: '#f6f6f6f'}}}>

注意：＃f6f6f6f是红色的颜色代码。

const Stack = createNativeStackNavigator();
export default function App() {
  return (
    <>
      <StatusBar style='auto' />
      <NavigationContainer>
        <Stack.Navigator screenOptions={{ contentStyle: {backgroundColor: '#f6f6f6f'}}}>
          <Stack.Screen name="List Page" component={ListPage} />
          <Stack.Screen name="List Page 2" component={ListPage} />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}