RN - Navigation

Navigation actions are handled by current navigator and bubble up if couldn't be handled#

ホーム構成部品の「Feed」と「Messages」に移動します.ナビゲーション()はTabです.Navigatorを使用して、FeedからHomeコンポーネントに移動した場合にナビゲートします.navide()を使用する場合、stack.Navigatorのnavigator()が使用されます.(自動快適)

別のstackのinitialScreenではなく、別のstackのscreenにナビゲートする場合は、特定のscreenにナビゲートする必要があります。

前例
Here, you might want to navigate to the Root stack from your Home component:navigation.navigate('Root', { screen: 'Settings' }); 最初のパラメータはstack、2番目の{screen:行きたい画面}を書けばいいです

ポップアップとモードの違い

ポップアップウィンドウ:ウィンドウ+ウィンドウ、ウィンドウの上のウィンドウ.
最近は使いません.ユーザー・ハラスメント
「モード」は既存のウィンドウにレイヤーを追加します.軽くてよく、エンコードより少し時間がかかるポップアップウィンドウです.
ソース:https://bomango.tistory.com/57

?? double question mark

let data =null;

const foo = data ?? 'default string';
console.log(foo);

//결과 : "default string"

?? 左側のデータがnullの場合、右側の値を返すことを指定します.
nullでない場合は、データ値が割り当てられます.

ネストされたナビゲーション構造と親ナビゲーションに見出しがある場合に注意してください。

-> stack
-->(child)stackが子stackにナビゲート()すると、親stackのタイトルは変更されません.
親スタックが移動していないため...(サブスタックナビゲーションが呼び出されました()
titleだけでなくgoBack buttonも生成しません.(同じ理由で)
->したがって、ヘッダーを必要としないページ(分類する場合はサブページ)にはgoBackボタンのヘッダーが必要です.title変更を「簡単に」処理するには、親スタック(論理構造ではサブページの分類であっても)でページ(論理)を生成することが望ましいです.

touchableWithoutFeedbackインポートに注意してください

import {
TouchableWithoutFeedback
} from 'react-native'; vsimport {
TouchableWithoutFeedback
} from
'react-native-gesture-handler';주의: rn gesture 사용시 css 다깨짐

テキストのtextAlign=「center」などが無効な場合

上流ビューに100%widthを与えない場合、下流<Text>コンポーネントはプロジェクトサイズと同じサイズのみを指定するため、自身のalignプロパティtextAlignを使用できません.
下のtextにborderWidth:1の枠線を付けると、文字の周りだけがスペースになります.

コードはこうです

ご覧のように、MenuTextのtextAlign="left"属性が与えられている場合、
親構成部品は<></>に閉じられているため、widthはプロジェクトサイズとしてちょうど指定されています.
だから、width:100%を包装器であげたら?

適用されます.
textAlignやjustifyContentなどのプロパティを使用する場合は、親divラベルに100%のビュー幅が指定されていることを確認します.

ネイティブのAndroidキーボードによる画面変更→キーボードがUIを破る場合

サイズ変更->Panの調整(下記)

出典:https://gran007.tistory.com/entry/応答-ネイティブ応答-ネイティブ-アンドロイド-キーボードキーボード-画面-変更[JLE'sBlog]

空白領域をクリックしてキーボードを離す

<TouchableWithoutFeedback onPress={Keyborad.dismiss} > </...は使えますが無理(?)

上のようにchildでviewを覆います.
つまりhttps://stackoverflow.com/questions/53573038/react-native-onpress-with-touchablewithoutfeedback-is-not-working#comment94010961_53573038
しかし

<Touchable..> 
  <View>...마이컴포넌트.. </View>
</Touchable..> 

そうするとUIが破壊されます
したがって、flex:1は<View style={{flex : 1}}> </..で指定する必要があります.

https://github.com/facebook/react-native/issues/10180

reduceの使い方(最新のcreateSlice)

1.createSliceを使用してname、initialstate、reducersを作成します.
2つのexport、xxxxがあります.減速機とxxxx.action;

でエクスポートされたアクションは、dispatchが使用する場所にインポートされ、dispatchに関数呼び出し状態(パラメータが必要な場合に挿入)を入れることができます.

次の図に示すように、reduceはすべてのreduceを構成ストレージにバンドルして登録できます.

ユーザセレクタ()の原理

ユーザセレクタの原理は以下のように検索される.

userSelectorは、関数構成部品のレンダリングとaction dispatchで動作します.
アクションが送信された場合、userSelectorは以前の結果値を比較します.
[再レンダリングを強制するのは、異なる場合のみです]
すなわち、上記の手順を簡単に順番に整理すると、
1.reduxを使用したい位置dispatch(액션함수())このように呼び出すとex)

dispatch(setUser(id));

2.dispatch起動後、setuserを呼び出すとreduceモジュールとなります.tsセクションで

export const useSlice = createSlice({
.....
  reducer:{
  setUser(state,action){
	state.id = action.payload.id;
	}}
})

示すように、Reducerはid値を変更し、アプリケーションの完全なストレージ領域のステータス値を変更します.

const state = useSelector((state) => state.user.id);

では、上記のコードからユーザセレクタを呼び出すfunctional 컴포넌트から状態値の比較を開始する.ここ(state)は正確にはstoreを指す.(次のソースから見ると、userSelectorのパラメータstateはstore値と見なすべきである)、すなわちstoreの変更stateである.user.これはid値を確認し、関数素子ページ全体を再レンダリングする原理です.id値が変わらなければ、再レンダリングは行われません.

注意書きを添付します:しかし、次のように受け取ったら

const {id, name} = useSelector((state) => state.user);

id、nameがオブジェクトを作成するように受信された場合
その他減速機

const bleState = useSelector((state) => state.bluetooth)

前述したように、Bluetooth Riduserの値を変更してもid、nameの素子はRinderingとなります.これは、オブジェクトの作成方法が新しい作成方法であるため、値を比較する前にオブジェクトが異なるアドレス値で識別されるためです.
したがって、他のreduceの値を変化させたくない場合は、
迎えに行くときは必ず離れろ!(Don't useオブジェクト構造の割り当て方法!)
これで使えます.

const id = useSelector((state) => state.user);
const name = useSelector((state) => state.user);

https://velog.io/@seungsang00/210406TIL#useselector-%EC%9E%91%EB%8F%99%EC%9B%90%EB%A6%AC

保護者=>children素子がpropsを受信すると、オブジェクトの構造化プロセスが混同されます。オブジェクトの実数

propsオブジェクトのサブコンポーネントから取得されるため、{}でよく使用されるオブジェクト構造化プロセスが混同されやすい.