使用 Router Flux 更改 NavBar 元素的颜色答案

【问题标题】：Changing the color of the elements of the NavBar using Router Flux使用 Router Flux 更改 NavBar 元素的颜色
【发布时间】：2018-05-25 13:49:35
【问题描述】：

我正在尝试更改后退按钮（左 V 形）的颜色和右文本的颜色。但它不起作用。有人可以指出我出了什么问题吗？谢谢！

import React from 'react';
import { Router, Scene, Stack } from 'react-native-router-flux';
import { Actions } from 'react-native-router-flux';
import { Image} from 'react-native';

//Scenes
import Welcome from './src/scenes/Welcome';
import Home from './src/scenes/Home';
import SignUp from './src/scenes/SignUp';
import TextView from './src/scenes/TextView'

export default props => (
  <Router navigationBarStyle={{ backgroundColor: '#68d6f9'}} 
        titleStyle={{ color: '#FFF'}}
        backButtonBarStyle={{color : "#FFF"}}
        barButtonTextStyle={{color: 'red'}}>
    <Stack key='root'>
        <Scene key='welcome' component={Welcome} title='Welcome' hideNavBar={ true } initial />
        <Scene key='home' component={Home} title='Home' hideNavBar={ false } left={()=>null}  />
        <Scene key='textView' component={TextView} title='TextView' hideNavBar={ false } backTitle=' ' />
        <Scene key='signUp' component={SignUp} title='Registration' hideNavBar={ false }
               left={<Image style={{height:40, width: 50, marginLeft: 20, marginTop:3}} source={require('./src/imgs/nelson.png')}></Image>}
               rightTitle={'X'}
               onRight={ () => Actions.welcome()}/>
    </Stack>
</Router> 
);

【问题讨论】：

标签： react-native react-native-router-flux

【解决方案1】：

您可以在Scene 中使用titleStyle、navigationBarStyle 和leftButtonIconStyle 来自定义您的风格。

类似这样的：

<Scene
  initial
  key="key"
  renderLeftButton={<IconComponent />}
  component={MyComponent}
  title="My Title"
  titleStyle={titleStyle}
  navigationBarStyle={navigationBarStyle}
  leftButtonIconStyle={leftButtonIconStyle}
/>

希望对你有帮助

【讨论】：