이 기사에서 할 일

Redux에서 관리하는 알림 배지 수를 ReactNative의 하단 탭에 표시시키는 기사입니다.
알림 배지 수는 화면을 가로 지르는 변수이므로 Redux에서 관리하는 것이 좋습니다.

이런 느낌의 녀석입니다 ↓↓ (이 기사에서는 이것의 간이판을 만듭니다)


ReactNavigation v.4에서는 하단 탭의 렌더링 타이밍에 버릇이 있었다 (?) 것 같습니다.
Redux에서 상태를 업데이트해도 하단 탭에 즉각 반영되지 않았습니다 (나의 주위에서도 몇 명 말하고 있었습니다만, 잘못되어 있으면 가르쳐 주세요!).
나는 무리하게 텍토 변수를 넣은 NavigationActions를 하단 탭에 dispatch 하는 것으로, 무리 재 렌더링해, 즉시 반영시키고 있었습니다(실제는 이 기사는 그것을 쓸 예정이었다).

그러나 무려, v.5에서는 그런 필요가 없어지고 있었습니다…!
고맙습니다 ...!

하고 싶은 일

화면에서 알림 배지 수를 변경하여 하단 탭의 숫자에 즉시 반영

주요 환경

Expo 36.0.0

react 16.9.0

@react-navigation/bottom-tabs 5.0.5

@react-navigation/native 5.0.5

@react-navigation/stack 5.0.5

react-redux 7.1.3

redux 4.0.5

ReactNavigation은 모듈 이동이 심합니다.
공식 문서을 읽고 필요한 라이브러리를 설치하십시오.

화면 구성

홈 스크린을 Stack으로 해, 그것을 하나의 탭에 대응시키는 단순한 화면 구성입니다.

코드

Redux

초기 상태와 reducer를 정의합니다.

src/reducers/index.js

const INITIAL_STATE = {
    badgeNumber:0,
}

const reducer = (state=INITIAL_STATE, action) => {
    switch (action.type){
        case "SET_BADGE_NUMBER":
            return {...state, badgeNumber:action.badgeNumber}
        default:
            return state;
    }
}

export default reducer

action을 정의합니다.

src/actions/index.js

export const setBadgeNumber = badgeNumber => ({
    type:"SET_BADGE_NUMBER",
    badgeNumber
})

store 만들기

src/store.js

import { createStore } from 'redux'
import reducers from './reducers'

export default createStore(reducers)

스크린

HomeScreen을 만들고 Redux와 연결합니다. badgeNumber+1이라는 텍스트를 터치하면 배지 수가 증가하는 사양에.

src/screens/Home.js

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { setBadgeNumber } from '../../src/actions'
import { connect } from 'react-redux'

const HomeScreen =({ badgeNumber,setBadgeNumber})=>{
  return(
    <View>
      <TouchableOpacity onPress={()=>setBadgeNumber(badgeNumber+1)}>
        <Text>badgeNumber + 1</Text>
      </TouchableOpacity>
    </View>
  )
}
const mapStateToProps = state => ({
  badgeNumber: state.badgeNumber
})

const mapDispatchToProps = {
  setBadgeNumber
}

 const Home = connect(
    mapStateToProps,
    mapDispatchToProps
  )(HomeScreen)

  export default Home

네비게이션

ReactNavigation으로 내비게이션을 만듭니다.
Stack과 Tab으로 HomeScreen을 랩합니다.

App.js

import React from 'react';
import { Text } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Provider, connect } from 'react-redux'
import { setBadgeNumber } from './src/actions'
import store from './src/store'
import Home from './src/screens/Home'

// ここでStackをつくります()今回は1画面だけだけど
const Stack = createStackNavigator();

const HomeStack=()=>{
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
    </Stack.Navigator>
  );
}


// ここでBottomTabを作ります(今回は上で作ったStack1つだけ)
const BottomTab = createBottomTabNavigator();

const MyBottomTab=()=>{
  return (
    <BottomTab.Navigator>
      <BottomTab.Screen 
        name="Home" component={HomeStack}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: () => (
            <Text>{store.getState().badgeNumber}</Text>
          ),
        }} />
    </BottomTab.Navigator>
  );
}


const Main=()=>{
  return(
    <NavigationContainer>
      <MyBottomTab>
      </MyBottomTab>
    </NavigationContainer>
  )
}

const mapStateToProps = state => ({
  badgeNumber: state.badgeNumber
})

const mapDispatchToProps = {
  setBadgeNumber
}

const ConnectedMain = connect(
  mapStateToProps,
  mapDispatchToProps
)(Main)

const App=()=>{
    return (
        <Provider store={store}>
            <ConnectedMain />
        </Provider>
    )
}
export default App

이제 HomeScreen의 badgeNumber+1을 터치하면 하단 탭의 숫자도 업데이트된다고 생각합니다.

요약

기본에 충실한 Redux의 사용법, 구성입니다.
상기의 코드만으로 탭에 즉각 반영해 주기 때문에 매우 고맙네요.
ReactNavigation v.5는 v.4에 비해 전망이 좋아졌다고 생각합니다.

이번은, HomeScreen으로부터 통지 배지수를 변경하는 사양이었습니다만, 푸시 통지가 오면 배지수를 인크리먼트 하는 것도 생각될까라고.
저도 프로젝트에서 Websocket 대응의 우선 순위는 아직 낮다고 느꼈을 때에는 푸시 알림이 온 것을 트리거에 배지 수를 증가시키고 있습니다.
이 경우 Focus되어 있는 것이 어떤 화면이든 상관없이 store 상태를 다시 작성해야 하지만, 위에서 말한 Main 컴포넌트 중에서 Notifications.addListener를 사용하여 핸들링하면 잘 작동합니다.

도움이되면 다행입니다!