Re Render Tab Navigator onPress Реактивная навигация - PullRequest
Новая
       9

Re Render Tab Navigator onPress Реактивная навигация

0 голосов
/ 19 мая 2018

, когда я использую только навигатор стека.экран перерисовывается каждый раз, когда я перехожу на другой экран.так как сделать то же самое с помощью навигатора вкладок?каждый раз, когда я нажимаю на вкладку меню (избранное)?

Снимок экрана: enter image description here

Код: 

const RootStack = StackNavigator(


{
    Home: {
      screen: Home,
      navigationOptions: {
        header: null
      }
    },
    Menu: {
      screen: Menu,
      navigationOptions: {
        header: null
      }
    },
  }
);

export default TabNavigator(
  {
    Home: { screen: RootStack },
    Favorite: { screen: Favorite },
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `home`;
        } else if (routeName === 'Favorite') {
          iconName = `heart`;
        }

    return <Icon name={iconName} size={25} color={tintColor} />;
  },
}),
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
tabBarOptions: {
  activeTintColor: '#00a6ed',
  inactiveTintColor: '#9e9e9e',
  style: {
      backgroundColor: '#FFFFFF',
  },
},
animationEnabled: false,
swipeEnabled: false,


}
);

Заранее спасибо!

1 Ответ

0 голосов
/ 19 мая 2018

react-navigation поддерживает слушателей, которые можно использовать для определения состояния фокуса или размытия экрана.

addListener - Подписаться на обновленияк жизненному циклу навигации

React Navigation генерирует события для компонентов экрана, которые подписываются на них:

  • willBlur - экран будет не сфокусированным
  • willFocus - экран будет сфокусирован
  • didFocus - экран сфокусирован (если был переход, переход завершен)
  • didBlur - экран не сфокусирован (если был переход,переход выполнен)

Пример из документов 

const didBlurSubscription = this.props.navigation.addListener(
  'didBlur',
  payload => {
    console.debug('didBlur', payload);
  }
);
// Remove the listener when you are done
didBlurSubscription.remove();

// Payload
{
  action: { type: 'Navigation/COMPLETE_TRANSITION', key: 'StackRouterRoot' },
  context: 'id-1518521010538-2:Navigation/COMPLETE_TRANSITION_Root',
  lastState: undefined,
  state: undefined,
  type: 'didBlur',
};
...