在 react-native-router-flux 中更改场景背景颜色

Question

这是我的 router.js 文件中的代码（取自 react-native-router-flux 文档部分）：

import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';

import PageOne from './PageOne';
import PageTwo from './PageTwo';

export default class App extends Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
          <Scene key="pageTwo" component={PageTwo} title="PageTwo" />
        </Scene>
      </Router>
    )
  }
}

如何更改 "header" 的背景颜色（其中 "go back" 箭头出现在上图中）？

我试过这种方式（添加sceneStyle={{ backgroundColor: 'red'}}）：

<Scene key="pageTwo" component={PageTwo} title="PageTwo" sceneStyle={{ backgroundColor: 'red'}} />

但它似乎不起作用。

仅供参考：

"react-native": "0.34.1",
"react-native-router-flux": "^3.35.0"

Answer 1

如库 API docs 中所述，您必须使用 navigationBarStyle 属性才能更改 header 样式。

试试这个：

<Scene key="pageTwo" component={PageTwo} title="PageTwo" navigationBarStyle={{ backgroundColor: 'red'}} />

在 react-native-router-flux 中更改场景背景颜色

change Scene background color in react-native-router-flux

reactjs

react-router

react-native

react-native-router-flux