自定义react-native-router-flux的默认导航栏

Question

我react native router flux在我的反应原生项目中用于导航.Router flux有默认值navBar.

有没有办法定制navBar？比如,改变文字和背景的颜色.

我尝试编辑该文件,node_modules/react-native-router-flux/src/navBar.js但它似乎不起作用.

请帮我.

Answer 1

在您创建场景的Router.js文件中,给出一个navBar属性,例如:

navBar={NavBar} 这里我的NavBar实际上是一个NavBar.js文件,我在其中自定义了导航栏

如果有帮助,请查看我的代码

Router.js文件:

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import mainScreen from './components/mainScreen';
import challengeScreen from './components/challengeScreen';
import NavBar from './components/NavBar';

const RouterComponent = () => {
  return (
    <Router>
<Scene key="root">
    <Scene key="homeScreen" component={mainScreen} hideNavBar={1} />
    <Scene
     key="screen2" component={challengeScreen} navTransparent={1}
     navBar={NavBar}
       />
</Scene>
    </Router>
  );
};
export default RouterComponent;

NavBar.js文件

import {
 View, Image, StatusBar, TouchableWithoutFeedback
} from 'react-native';
import React, { Component } from 'react';
import { Actions, Router, Scene } from 'react-native-router-flux';

class NavBar extends Component {
  render() {
    return (
<View style={styles.backgroundStyle}>
      <StatusBar />
      <View style={{ flexDirection: 'row' }}>
      <TouchableWithoutFeedback onPress={() => Actions.homeScreen()}>
      <Image
    source={require('./Images/back-arrow.png')}
    style={styles.backarrowStyle} />
      </TouchableWithoutFeedback>

      <Image
  source={require('./Images/help.png')}
  style={styles.helpStyle} />


  <Image
source={require('./Images/setting.png')}
style={styles.settingStyle} />
    </View>
</View>
    );
  }

}
const styles = {
  backgroundStyle: {
    backgroundColor: 'transparent'
  },
  backarrowStyle: {
    resizeMode: 'contain',
    flexDirection: 'row',
    width: 50,
    height: 50,
    left: 0,
    justifyContent: 'flex-start'
  },
  helpStyle: {
    resizeMode: 'contain',
      width: 50,
      height: 50,
      left: 220,
      justifyContent: 'flex-end',
      position: 'relative'

  },
  settingStyle: {
    resizeMode: 'contain',
    width: 50,
    height: 50,
    justifyContent: 'flex-end',
  position: 'relative',
  left: 210
  }
};


export default NavBar;

这有助于我自定义导航栏,希望它能帮到你

Answer 2

react-native-router-flux 提供了一些 api 来做到这一点，看看https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md，也许是 titleStyle 和 navigationBarStyle是你所需要的。