React Native - tabBarOnPress может получить доступ только к состоянию на вкладке initialRouteName - createMaterialBottomTabNavigator - PullRequest
Новая
       41

React Native - tabBarOnPress может получить доступ только к состоянию на вкладке initialRouteName - createMaterialBottomTabNavigator

0 голосов
/ 04 июля 2018

Дано:

App.js 

// import...
    export default class App extends Component<Props> {

      render() {
        return (
          <Root>
            <MenuProvider>
              <AppStackNavigator />    
            </MenuProvider>
          </Root>
        );
      }
    }

    const AppStackNavigator = StackNavigator({
      Main : {
        screen: MainScreen
      },
      Detail : {
        screen: DetailScreen
      }
    })

MainScreen.js 

// import...
export default class MainScreen extends Component {
  // ...
  static navigationOptions = {
    header: null
  }

  render() {
    return ( 
        <AppTabNavigator screenProps={{ rootNavigation: this.props.navigation}}/>
    )
  }
}

const AppTabNavigator = createMaterialBottomTabNavigator({
    HomeTab: {
        screen: HomeTab
    },
    ExerciseTab: {
        screen: ExerciseTab
    },
    LovedTab: {
        screen: LovedTab
    },
    FilterTab: {
        screen: FilterTab
    },
    SettingTab: {
        screen: SettingTab
    }
}, {
    labeled: true,
    shifting: true,
    initialRouteName: 'HomeTab', 
    barStyle: { backgroundColor: '#fff' },
    backBehavior: 'none'
});

HomeTab.js - tabBarOnPress может получить доступ к состоянию через параметры 

//import...
export default class HomeTab extends Component {
//...
  static navigationOptions = {
    tabBarIcon: ({tintColor}) => (
      <Icon name="md-home" style={{color: tintColor}} />
    ),
    title: 'Home',
    tabBarOnPress: ({navigation}) => {
      navigation.state.params.setCurrentScreen(navigation.state);
    }
  }

  componentDidMount() {
    this.props.navigation.setParams({
      ...this.props.navigation.state.params,
      setCurrentScreen: (state) => {
        this._getFontSize();       
        this.props.navigation.navigate(state.key);
      }
    });
  }

LovedTab.js - тот же код, что и Hometab, не работает: (

// import..
export default class LovedTab extends Component {
//...
static navigationOptions = {
    tabBarIcon: ({tintColor}) => (
      <Icon name="md-heart" style={{color: tintColor}} />
    ),
    title: 'Loved',
    tabBarOnPress: ({navigation}) => {
      navigation.state.params.setCurrentScreen(navigation.state);
      // params is undefined - setting the same as HomeTab.js
    }
  }
}

Вопрос: Как я могу поймать событие прессы на LovedTab, чтобы обновить состояние (перезагрузить текущую вкладку). Похоже, что setParams работает только на первой вкладке (initialRouteName).

Моя главная цель - перезагружать LovedTab всякий раз, когда вкладка находится в фокусе. У вас есть другая идея?

...