React Navigation v4
Reactのナビゲーションライブラリ
Hooks
v5の場合は↑を別途入れないといけない
useNavigation
navigtion.state.paramではなくgetParamを使おう ref
const { name } = this.props.navigation.state.params; ではなく const name = this.props.navigation.getParam('name', 'Peter'); を使うparamsに
namae がないときに、 Peter を入れてくるちがう？paramsがundefinedのときか？
つまりundefindで落ちなくなる
これさ、もし
.state.params.name = undefined だったらどうなるの？つまり
name プロパティ自体はあるけど中身がundefinedであるとき↑こうなるのってわざわざsetParams時にそのプロパティにundefined入れたときだけでは？
なので、そんなことしなければそうはならない
ts// この2つは等価なのか？
navigation.getParam('userId') || '0';
navigation.getParam('userId', '0');
// こうする必要がある？
navigation.getParam('userId', '0') || '0';createMaterialTopTabNavigator
こいつパフォーマンスやばくね？
今見ていないタブのactionも実行される
画面上部のタブを作る
このタブをクリックしたときにページを上にスクロールしたい
twitterとかみたいに
案２ react-navigationのFlatListを使う
スタックに対する扱い
push, pop以外にも、replace, resetなどもある
dismiss
スタックの破棄
NavigationActionsは普通のメソッドと何が違うのか
いつ使うのか
並列ページに対しても作用できる？
console.logでnavigationのスタック状況を確認したい
2回連続でbackしたいときはどうする？
navigation.pop(2) でいけるはず ref navigation.pop(); navigation.pop() と同じreplaceはこういうときに使えるものなの？
そう。最初からpop*2することが決まっているならpushするところをreplaceにすればいい
a→b→replace(c) すれば、スタックは a,c になるFCでnavigation.setOptionsをしたいとき
NavigationScreenComponent でFCの型付をしたらいいtsxconst HogePage: NavigationScreenComponent<{}, {}> = () => (
<></>
);
HogePage.navigationOptions = () => ({
headerTitle: 'Hogeページ'
});
export default HogePage;普通にFC内でかけるようになっていた ref
できれば親から
navigation 受け取らなくてもできるようになると嬉しいんだけどなつまりhooksが欲しい
ていうか関数内にいると邪魔だな、前のほうがいい
v5.1
型の話
以下のようにして型を付けてあげればいい
ts navigation: NavigationScreenProp<{}>; {} の中にはparamsとかの型を書く？pramsへの型付け
型の付け方
v4のexampleを参考にする
むずくね？正解がわからん
v5のexampleは良い感じだが、v4はclassコンポーネントが多いので微妙に参考にならない
NavigationInjectedProps を使うtsHogePage.navigationOptions = ({
navigation
}: NavigationInjectedProps) => ({
...
})動向
アニメーション