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

Posted 2023-03-07

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

【英文标题】：change text color of title elements for a scene

【发布时间】：2018-08-29 19:34:07

【问题描述】：

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

除了主屏幕的leftTitle 和rightTitle 属性外，我已经自定义了所有内容。我可以命名它们，但我无法设置它们的样式。它们保持这种蓝色，如下图所示。

这是该场景的代码：

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

有人知道如何改变标题文本的颜色吗？

谢谢！

【参考方案1】：

在node modules中找到react-native-router-flux文件夹 导航到 react-native-router-flux > src > NavBar.js 像这样在样式表中编辑颜色样式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,
  ,

【讨论】：

哦，哇，您必须像这样深入编辑它？有没有办法把它当作道具传下去？谢谢！

@SkyeBoniwell 不，与道具无关。您需要编辑库 src 文件以执行此类操作的每个库

我花了好几个小时寻找如何修改它 - 非常感谢！

【参考方案2】：

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

Click here for the documentation 如你所见，我使用道具自己设置了样式

这里是代码

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 文件中设置样式会更好