ReactNative 出会ったエラーと解消の記録

記事の目的

私の ReactNative 勉強＆制作の記録メモ

教訓：要素数が少ない、一定である配列要素のレンダリングは、FlatList ではなく、単純ループで記述せよ

何が起きたか

VirtualizedLists should never be nested inside plain ScrollViews
のエラーに出会った

要は、FlatList を ScrollView の中で使うなよ、と怒っている

FlatList と ループの使い分け をちゃんとする

FlatList

複数ある配列要素を、ダイレクトローディングしながらレンダリングしてくれる
要素数が多い、不定、サーバサイドから供給されるなど、配列全要素をレンダリング前にロードするのはパフォーマンス的に問題となるケースの時に使う

ループ

配列要素が一定、少ないときには、単純なループで記述すべきだった

教訓：条件で表示・非表示するときの条件記述をBoolean型に矯正せよ

何が起きたか

Text strings must be rendered within a Text component
文字列は、ちゃんと コンポーネントを使え、って怒っている
文字列要素を でちゃんとくくっているのに、上記のエラーに苛まれる

これを見てようやく理解した。

3項演算子条件をBoolean型以外が使われている

ダメな例

<View>
  <Text>ほげほげ</Text>
{ errorMessage && (
  <Text>{errorMessage}</Text>
)}
  <Text>ほげほげ</Text>
</View>

上記例で errorMessage == '必須入力です' ならば問題ないけど errorMessage == '' の時、 ''をレンダリングしようとするらしい
結果、View 直下に 文字列要素がレンダリングされてしまう

イケてる例

<View>
  <Text>ほげほげ</Text>
{ !!errorMessage && (
  <Text>{errorMessage}</Text>
)}
  <Text>ほげほげ</Text>
</View>

上記例ならば、文字が Boolean として評価され、結果 true or false となるので、Reactさんが期待通りに判定してくれる

教訓：import を一方通行にせよ

何が起きたか

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
のエラーに出会った

要は、

A.js

import B from './B';

B.js

import A from './A';

すんなよということ

👆がしたけりゃ、別ファイルにしよう

以下が私がやっていたこと

App.jsx

import Register from './screen/Register';
import View from './screen/View';
...
<Stack.Screen
 name={Screen.REGISTER}
 component={Register}
/>
<Stack.Screen
 name={Screen.VIEW}
 component={View}
/>
...
export const Screen = {
 REGISTER: 'Register',
 VIEW: 'View',
};

Register.jsx

import { Screen } from '../App';
...
navigation.navigate(Screen.VIEW);
...

View.jsx

import { Screen } from '../App';
...
navigation.navigate(Screen.REGISTER);
...

ほんとは👆の形のほうが整理できるんだけどなぁ～
リテラル書くの嫌だしなぁ～
定数だけのファイルにするのも嫌だし、Definition.js に Screen 定数持ってくるのもなんかなぁ～

みなさん、どうやってるんだろ