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

发布时间：2020-12-15 20:15:48 所属栏目：百科来源：网络整理

导读：我正在使用反应原生路由器通量在我的反应原生项目中导航. Router flux有一个默认的navBar. 有没有办法自定义navBar？比如,改变文字和背景的颜色. 我尝试在node_modules / react-native-router-flux / src / navBar.js中编辑该文件,但它似乎不起作用. 请帮我.

我正在使用反应原生路由器通量在我的反应原生项目中导航. Router flux有一个默认的navBar.

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

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

请帮我.

解决方法

在您创建场景的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',left: 220,justifyContent: 'flex-end',position: 'relative'

  },settingStyle: {
    resizeMode: 'contain',position: 'relative',left: 210
  }
};


export default NavBar;

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!