更改场景标题元素的文本颜色

时间:2018-08-29 19:34:07

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

我正在使用React Native和react-native-router-flux创建一个小型的Android移动应用。

我已经自定义了主屏幕的leftTitlerightTitle属性以外的所有内容。我可以给它们命名,但是不能为它们命名。如下图所示,它们保持这种蓝色。

enter image description here

这是该场景的代码:

<Scene
  rightTitle="Add"
  onRight = { () => Actions.employeeCreate() }
  key="employeeList"
  component={EmployeeList}
  title="Employees"
  leftTitle="Log Out"
  onLeft={ () => logUserOut() }
  initial
/>

有人知道如何更改标题文本的颜色吗?

谢谢!

2 个答案:

答案 0 :(得分:2)

  1. react-native-router-flux
  2. 中找到 node modules 文件夹
  3. 导航到 react-native-router-flux > src > NavBar.js
  4. 像这样在StyleSheet中编辑 barRightButtonText barLeftButtonText 的颜色样式

对于右键文字:

 barRightButtonText: {
    color: 'rgb(0, 122, 255)',    //Your rgb color code here
    textAlign: 'right',
    fontSize: 17,
  },

对于左键文字

 barLeftButtonText: {
    color: 'rgb(0, 122, 255)',  //Your rgb color code here
    textAlign: 'left',
    fontSize: 17,
  },

答案 1 :(得分:1)

与@Akila Devinda所说的相反,道具与样式无关。是的,您可以按照react-native-router-flux文档中的指示使用props为导航栏设置样式

Click here for the documentation如您所见,我是通过使用道具自己设置样式的

Sample

这是代码

const App = () => {
 return(
   <Router navigationBarStyle={{ backgroundColor: '#3F51B5' }}>
    <Scene key="root">
    <Scene key="home" component={ HomeScreen } title="Home"  titleStyle={ { color: 
      "#ffffff" } } initial />
    <Scene key="about" component={ AboutScreen } title="About" titleStyle={ { color: 
         "#ffffff" } } navBarButtonColor="white"/>
   </Scene>
   </Router>
 )
}

我认为,在定义导航栏特定的样式时,最好用这种方式代替直接在src文件中进行样式设置