React Native-tabBarOnPress只能访问initialRouteName选项卡中的状态-createMaterialBottomTabNavigator

时间:2018-07-04 12:26:28

标签: react-native state react-navigation tabnavigator

给出:

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。还有其他想法吗?

0 个答案:

没有答案