React Native アプリ開発メモ

#ReactNative

##長短点(勝手に思って)
###長点
・JavaScriptライブラリであるReactを組み合わること
・Reactを使用してAndroidおよびiOS用のネイティブアプリを作成できること
・高速リフレッシュできること

###短点
・別のバージョンへのアップグレードが難しいこと
・例外の根本原因が簡単に突き止められない場合があること
・複雑な構造対応が難しいこと

##Component

State

Reactコンポーネントは、ユーザーの操作やネットワークの応答などに応じて、
時間の経過とともに出力を変更できます。
####実装

state.ts

 state = {
    count: 0
  }
  onPress = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

#Redux
JavaScriptアプリの予測可能な状態コンテナー

##Redux Toolkit
Reduxロジックを作成するための公式に推奨されるアプローチ

###Slice
Reducer(以前の状態とアクションを組み合わせ)を持つ

slice.ts

import { createSlice } from '@reduxjs/toolkit';
const firestoreSlice = createSlice({
      name: "list",
      initialState: [],
      reducers: {
        addChat: (state: Chat[], action) => {
            state.push(action.payload)
        },
        saveChat: (state, action) => {
          saveDocument(action.payload);
      }
    }
    });

###Store
状態は基本的に全てここで集中管理

store.ts

const rootReducer = combineReducers({
    list: fireBaseReducer,
    name: sampleReducer
    });

const store = configureStore({
reducer: rootReducer,
});

###画面

screen.tsx

import firestore from '@react-native-firebase/firestore';

const results = useSelector(state => state.list );

const firestoreRows = results.map ((chat) => {
    <>
    <Text>message:{chat.message} \n</Text>
    <Text>date:{chat.sendTime}</Text>
    </>
});

以上です。