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

时间:2017-01-09 15:04:57

标签: reactjs react-native react-router react-native-router-flux

这是我在router.js文件中的代码(取自react-native-router-flux docs部分):

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

enter image description here

如何更改&#34;标题&#34;的背景​​颜色? (其中&#34;返回&#34;箭头出现在上图中)?

我试过这种方式(添加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"

1 个答案:

答案 0 :(得分:2)

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

请改为尝试:

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