質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1540閲覧

React Nativeのとあるライブラリにておかしな挙動が。

MOTOMUR

総合スコア195

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/01/24 12:11

ライブラリの内部のデバック方法が知りたいです。

この、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などを読み込めばどこかに答えはありますでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

React.js のデバッグツールとしては React Developer Tools がよいです

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja

props や state の中身がわかるのでデバッグがはかどります

また、ソースを拝見すると props の中身を書き換えているようですが、やってはいけないことになっているのでそこで挙動が変になっているのかもしれません

https://stackoverflow.com/questions/24939623/can-i-update-a-components-props-in-react-js

代わりに state に history push するなどを検討してみてください

投稿2018/01/25 02:32

januswel

総合スコア301

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問