Компонент рендеринга при выборе tab-реактивной

Question

Я использую TabNavigator от реакции-навигации для навигации по 3 компонентам. Мой компонент TabNavigator выглядит так:

import routeOnMap from '../screens/routsOnMap.js';
import meditatinWalk from '../screens/meditationWalk.js';
import newWordToWalkOn from '../screens/newWordToWalkOn.js';
import * as firebase from 'firebase';

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';

import {
  StackNavigator,
  NavigationActions,
  TabNavigator,
  TabBarBottom,
} from 'react-navigation';

import Ionicons from 'react-native-vector-icons/Ionicons';

export default TabNavigator(
{
  MeditatinWalk: { screen: meditatinWalk },
  NewWordToWalkOn: { screen: newWordToWalkOn },
  RouteOnMap: { screen: routeOnMap },

},
{
  navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, tintColor }) => {
      const { routeName } = navigation.state;
      let iconName;
      if (routeName === 'MeditatinWalk') {
        iconName = `ios-walk${focused ? '' : '-outline'}`;
      } else if (routeName === 'NewWordToWalkOn') {
        iconName = `ios-add-circle${focused ? '' : '-outline'}`;
      } else if (routeName === 'RouteOnMap') {
        iconName = `ios-map${focused ? '' : '-outline'}`;
      }

      // You can return any component that you like here! We usually use an
      // icon component from react-native-vector-icons
      return <Ionicons name={iconName} size={25} color={tintColor} />;
    },
  }),
  tabBarOptions: {
    activeTintColor: '#626A41',
    inactiveTintColor: 'gray',
  },
  tabBarComponent: TabBarBottom,
  tabBarPosition: 'bottom',
  animationEnabled: false,
  swipeEnabled: false,
}
);

Я хочу перерисовать то, что находится внутри моего компонента NewWordToWalkOn, когда он находится при нажатии / вкладке. Код, который я хотел бы перерисовать, находится внутри метода componentDidMount() в компоненте NewWordToWalkOn.

//imports

export default class NewWordToWalkOn extends Component {
constructor() {
 super()
   this.state = {
   words: [],
 };
}

static navigationOptions = ({ navigation }) => ({
 title:
  <Text style={{ fontWeight: 'bold', color: '#626A41'}}> Vælg nye ord at vandre på </Text>,
headerLeft: null,
headerRight:
  <TouchableOpacity
    style={{ flex: 1, alignItems: 'center', justifyContent: 'center', marginRight: 10 }}
    onPress={ () => MeditatinWalk._logout() }>
      <Text
        style={{ fontWeight: 'bold', color: '#626A41'}}>
        Log ud
      </Text>
  </TouchableOpacity>
});

 componentDidMount() {
  //code that needs rerendered
 }


render() {

)

return (
  <ScrollView style={styles.wrapper}>
    //all the elements
  </ScrollView>
);
}
}

Любые предложения, как отрендерить?

Answer 1

Если вы хотите обновить свое представление при нажатии вкладки, попробуйте подписать событие жизненного цикла навигации с помощью this.props.navigation.addListener.

Пример:

class NewWordToWalkOn extends Component {
  constructor (props) {
    super(props)
    this.navigationWillFocusListener = props.navigation.addListener('willFocus', () => {
      // do something like this.setState() to update your view
    })
  }
  componentWillUnmount () {
    this.navigationWillFocusListener.remove()
  }
}