ライブラリの内部のデバック方法が知りたいです。
この、Footerのライブラリ(react-native-material-bottom-navigation)を試してみようと思い、
いじって見てたのですが、変な挙動をしてしまうようになりました。
状況を順番に説明させてください。
js
1import React, { Component } from 'react' 2import BottomNavigation, { Tab } from 'react-native-material-bottom-navigation' 3import Icon from 'react-native-vector-icons/MaterialIcons' 4 5class MyComponent extends Component { 6 render() { 7 return ( 8 <BottomNavigation 9 labelColor="white" 10 rippleColor="white" 11 style={{ height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0 }} 12 onTabChange={(newTabIndex) => alert(`New Tab at position ${newTabIndex}`)} 13 > 14 <Tab 15 barBackgroundColor="#37474F" 16 label="Movies & TV" 17 icon={<Icon size={24} color="white" name="tv" />} 18 /> 19 <Tab 20 barBackgroundColor="#00796B" 21 label="Music" 22 icon={<Icon size={24} color="white" name="music-note" />} 23 /> 24 <Tab 25 barBackgroundColor="#5D4037" 26 label="Books" 27 icon={<Icon size={24} color="white" name="book" />} 28 /> 29 <Tab 30 barBackgroundColor="#3E2723" 31 label="Newsstand" 32 icon={<Icon size={24} color="white" name="newspaper" />} 33 /> 34 </BottomNavigation> 35 ) 36 } 37}
これは先ほど貼った Footerの、公式の使用例になるのですが、
この状態でテストした時はなんの問題もなく、動作することは確認しました。(onTabChangeのアラートの部分)
また、このテストで、BottomNavigationのonTabChangeにて、newTabIndexなるものが、0~3の数値であるということがわかったので、
js
1onTabChange={(newTabIndex) => this.tabFunc(newTabIndex)} >
として、
js
1 tabFunc = (newTabIndex) => { 2 const self = this 3 if(newTabIndex === 1){ 4 self.props.history.push('/MyPage') 5 } 6 else if(newTabIndex === 2){ 7 self.props.history.push('/Search') 8 } 9 else if(newTabIndex === 3){ 10 self.props.history.push('/Help') 11 } 12 else if(newTabIndex === 0){ 13 self.props.history.push('/') 14 } 15 else{ 16 self.props.history.push('/404') 17 } 18 }
こうして見たのですが、問題はここからです。
もちろん、なんの問題もなく、tabFuncの処理はしてくれるのですが、なぜか **'/'のタブに戻ってしまうのです。(**上のコードでいうMovie&TV)
/にいる時は、好きなタブをクリックすると、ちゃんとした動作になります。
しかし、他にいる場合、/以外をクリックすると/に戻る動作になってしまいます。
なぜこのようになってしまうのかを知りたいのですが、このような外部のライブラリ内部のデバックの仕方がわからず、困っています。
こういう時皆さんはどのようにデバックするのでしょうか?
もしくはdocsなどを読み込めばどこかに答えはありますでしょうか。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。