ReactNavigationのTabNavigatorで切替時に毎回イベントさせる方法

• ReactNavigation

v2

• 参考: https://stackoverflow.com/questions/50961321/createbottomtabnavigator-how-do-i-reload-refresh-a-tab-screen-on-tab-on-the-tab#

import React from 'react'
import { createBottomTabNavigator } from 'react-navigation'
import { View, Text } from 'react-native'

class Home extends React.Component {
  componentDidMount() {
    this.subs = [
      this.props.navigation.addListener('didFocus', () => this._onFocus())
    ]
  }

  componentWillUnmount() {
    this.subs.forEach(sub => sub.remove())
  }

  _onFocus = () => {
    console.log('home on focus')
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    )
  }
}

class Test extends React.Component {
  componentDidMount() {
    this.subs = [
      this.props.navigation.addListener('didFocus', () => this._onFocus())
    ]
  }

  componentWillUnmount() {
    this.subs.forEach(sub => sub.remove())
  }

  _onFocus = () => {
    console.log('test on focus')
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Test!</Text>
      </View>
    )
  }
}

export default createBottomTabNavigator(
  {
    Home,
    Test
  }
)

v1

• 参考： https://github.com/react-navigation/react-navigation/issues/2725#issuecomment-385216286

  static navigationOptions = ({ navigation }) => {
    return {
      tabBarOnPress: ({ scene: { index }, jumpToIndex }) => {
        jumpToIndex(index)
        navigation.state.params.onFocus()
      }
    }
  }

  componentDidMount() {
    this.props.navigation.setParams({
      onFocus: this._onFocus.bind(this)
    })
  }

  _onFocus = () => {
    // do something
  }