我对React Native相当陌生,但我有一个简单的工作应用程序,有三个场景.我以前使用过Navigator,但它感觉很迟钝,很高兴try React Navigation(如https://reactnavigation.org/).实施React导航后,我的背景 colored颜色 从白色切换到灰色,灰色切换到白色.这是一个奇怪的问题,不应该有关联.但是我没有改变我的风格.我只实现了新的导航, colored颜色 也改变了.当我回到Navigator时,我的 colored颜色 恢复了.我用的是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,否则将获得默认 colored颜色 .

UPDATE!! As of May 2017 beta9 the navigationOptions are now flat

你可以read about the breaking change here

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

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

React-native相关问答推荐

使用NextJS映射从数组中提取用户角色

Firebase身份验证Redux使用说明

Google SignIn SDK 因抛出错误而失败,发生不可恢复的登录失败 -catch 错误

如何在react-native中淡化视图的边缘?

使用 AsyncStorage 如何以及在何处保存整个 redux 存储

用于部署后设置的 React 配置文件

React Native - ScrollView 中的 ListView 分页?

使用直接在 Windows 中运行的模拟器在 WSL 中运行 React Native

react native图像不适用于特定 URL

在 Docker 中使用 Fastlane 构建 iOS 应用

渲染时获取未定义不是 React Native 中的对象

使用带有样式组件的动画

React Native onLayout 与 React Hooks

React Native 将状态中的数组值应用为 Picker 项

ReactNative TextInput 不可见 iOS

如何在 React Native 中重复图案图像以创建背景?

更改导航标题背景 colored颜色

列之间的 React Native FlatList 分隔符

React Native <>(空)组件到底是什么

在 react-native 中使用捏拉zoom 的可滚动图像