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

Question

我在我的 react native 项目中使用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

您应该添加navigationBarStyle 属性来自定义导航栏。您可以查看以下代码：

<Scene key="key1" icon={TabIcon} title="book-open">
                    <Scene key="key2" hideNavBar={false}
                           navigationBarStyle={{backgroundColor:'transparent',marginTop:8, borderBottomWidth:0}}
                           component={TestComponent}
                           title=""/>
                </Scene>

这里也提到了这个主题。https://github.com/aksonov/react-native-router-flux/issues/160

Answer 3

react-native-router-flux repository的examples文件夹中有a working example。

例如，您的自定义导航栏将是：

import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import React from 'react';
import { Actions } from 'react-native-router-flux';

const styles = StyleSheet.create({
    container: {
        height: Platform.OS === 'ios' ? 64 : 54,
        flexDirection: 'row',
        paddingTop: 20,
    },
    navBarItem: {
        flex: 1,
        justifyContent: 'center',
    },
});

export default class CustomNavBar extends React.Component {
    // constructor(props) {
    //   super(props)
    // }

    _renderLeft() {
        if (Actions.currentScene === 'customNavBar1') {
            return (
                <TouchableOpacity onPress={() => console.log('Hamburger button pressed')} style={[styles.navBarItem, { paddingLeft: 10 }]}>
                    <Image
                    style={{ width: 30, height: 50 }}
                    resizeMode="contain"
                    source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png' }}
                    />
                </TouchableOpacity>
            );
        }
        return (
            <TouchableOpacity onPress={Actions.pop} style={[styles.navBarItem, { paddingLeft: 10 }]}>
                <Image style={{ width: 30, height: 50 }} resizeMode="contain" source={{ uri: 'https://image.flaticon.com/icons/png/512/0/340.png' }} />
            </TouchableOpacity>
        );
    }

    _renderMiddle() {
        return (
            <View style={styles.navBarItem}>
                <Text>{this.props.title}</Text>
            </View>
        );
    }

    _renderRight() {
        return (
            <View style={[styles.navBarItem, { flexDirection: 'row', justifyContent: 'flex-end' }]}>
                <TouchableOpacity onPress={() => console.log('Share')} style={{ paddingRight: 10 }}>
                    <Image style={{ width: 30, height: 50 }} resizeMode="contain" source={{ uri: 'https://cdn3.iconfinder.com/data/icons/glypho-free/64/share-512.png' }} />
                </TouchableOpacity>
                <TouchableOpacity onPress={() => console.log('Search')} style={{ paddingRight: 10 }}>
                    <Image style={{ width: 30, height: 50 }} resizeMode="contain" source={{ uri: 'https://maxcdn.icons8.com/Share/icon/p1em/Very_Basic//search1600.png' }} />
                </TouchableOpacity>
            </View>
        );
    }

    render() {
        let dinamicStyle = {};
        if (Actions.currentScene === 'customNavBar1') {
            dinamicStyle = { backgroundColor: 'red' };
        } else {
            dinamicStyle = { backgroundColor: 'yellow' };
        }

        return (
            <View style={[styles.container, dinamicStyle]}>
                {this._renderLeft()}
                {this._renderMiddle()}
                {this._renderRight()}
          </View>
        );
    }
}

它非常适合我。只是不要忘记设置 Scene 或 Stack 的 navBar 属性：

<Scene navBar={CustomNavBar} key='myKey' component={MyComponent} />

Answer 4

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