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。

Answer 3

您应添加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 4

react-native-router-flux repository的示例文件夹中有一个有效的示例。

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

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>
        );
    }
}

对我来说效果很好。只是不要忘记设置场景或堆栈的 navBar 属性：

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

您可以找到示例here

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

4 个答案: