react-native - 使用 Router Flux 更改 NavBar 元素的颜色

Question

我正在尝试更改后退按钮（左 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-nativereact-native-router-flux

Answer 1

您可以使用titleStyle,navigationBarStyle并 leftButtonIconStyle在您Scene的中自定义您的样式。

像这样的东西：

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

希望能帮助到你