web-dev-qa-db-ja.com

react-native-router-fluxのデフォルトのナビゲーションバーをカスタマイズする

私はreactNativeプロジェクトのナビゲーションにreact native router fluxを使用しています。 Router fluxにはデフォルトのnavBarがあります。

navBarをカスタマイズする方法はありますか？たとえば、テキストと背景の色を変更します。

node_modules/react-native-router-flux/src/navBar.jsでファイルを編集しようとしましたが、機能しないようです。

私を助けてください。

react-nativereact-native-router-flux
7
Avikrit Khati

シーンを作成する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;

これは、ナビゲーションバーをカスタマイズするのに役立ちました。

10
Adarsh Sreeram

react-native-router-fluxリポジトリ のexamplesフォルダに 実例 があります=。

たとえば、カスタムナビゲーションバーは次のようになります。

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またはのnavBarプロパティを設定することを忘れないでくださいスタック：

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

ナビゲーションバーをカスタマイズするには、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/16

1
Yasemin çidem

react-native-router-fluxは、これを行うためのAPIを提供します。 https://github.com/aksonov/react-native-router-flux/blob/master/docsをご覧ください。 /API_CONFIGURATION.md 、おそらくtitleStyleとnavigationBarStyleが必要です。

0
EricHua23