Javascript 反应导航切换背景颜色和样式StackNavigator

我对React Native相当陌生，但我有一个简单的工作应用程序，有三个场景。我以前使用过Navigator，但它感觉很迟钝，很高兴尝试React导航（如中所示）。实施React导航后，我的背景颜色从白色切换到灰色，灰色切换到白色。这是一个奇怪的问题，不应该有关联。但是我没有改变我的风格。我只实现了新的导航，颜色也改变了。当我返回到导航器时，我的颜色返回。我用的是StackNavigator。还有其他人遇到过这种奇怪的现象吗

---

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

要在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，导航选项现在没有变化

你可以

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

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

---

下面是一个我用来更改卡片背景颜色、标题背景和字体颜色的示例

/*
1.更改导航背景色。
-更改StackNavigator组件中的样式backgroundColor属性
-还可以将cardStyle对象添加到视觉选项配置中，指定背景颜色
*/
//你的新背景色
让myNewBackgroundColor='teal'；
const AppNavigator=StackNavigator({
SomeLoginScreen：{
屏幕：SomeLoginScreen
}
}, {
headerMode:'屏幕'，
cardStyle:{backgroundColor:myNewBackgroundColor
}
});
//将新颜色添加到“样式”属性
类应用程序扩展了React.Component{
render（）{
报税表（
{this.navigator=nav；}}/>
);
}
}
/*
2.更改导航标题背景颜色和文本颜色。
-更改StackNavigator导航选项
*/
/*
在文档中不清楚，但颜色不清楚
更改中文本标题的颜色
当新样式对象更改
背景色。
*/
//您的新文本颜色
让myNewTextColor='forestgreen'；
//新标题的背景色
让myNewHeaderBackgroundColor='粉色'；
const AppNavigator=StackNavigator({
SomeLoginScreen：{
屏幕：SomeLoginScreen，
导航选项：{
标题：'登记'，
标题：{
tintColor:myNewTextColor，
风格：{
背景颜色：myNewHeaderBackgroundColor
}
},
}
}
}, {
headerMode:'屏幕'，
卡片样式：{背景颜色：'red'
}
});

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

试试这个代码

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

静态导航选项={
标题：“KindleJoy-儿童学习中心”，
HeaderIntColor:“#ffffff”，
/*头部背景：(
),*/
头型：{
背景颜色：“#1d7110”，
borderBottomColor:'黑色'，
边框底部宽度：0，
},
头饰样式：{
尺码：18，
}
};

好吧，我什么都不管用，所以我设法找到了自己的解决方案

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

静态导航选项=（{navigation，screenProps}）=>({
左校长：(
{navigation.goBack（）；}}/>
)，头型：{
背景颜色：CLColors.MAIN_蓝色
}, 
标题：简介
，页脚：空，
});

headerTitle

将神奇地在此处放置一个自定义的

Text

元素

headerStyle

将神奇地改变导航栏的背景色

---

headerLeft

将帮助您自定义后退按钮。

我认为在

react navigation 5

中，上述答案对我都不起作用，因此，我将其作为自己的解决方案，并与您分享

刚刚在

react navigation 5

中更改了

主题的背景，您就可以开始了

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;


从“React”导入React；
从'@react navigation/native'导入{NavigationContainer，DefaultTheme}；
常量MainNavigator=（）=>{
常数MyTheme={
…默认主题，
颜色：{
…默认主题。颜色，
背景：“#FFF”，
},
};
返回(
...
);
};
导出默认主导航器；

可能是更好的答案，因为它适用于整个堆栈。
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;