Реагировать на нативную навигациюОпции вызывая ошибку функции

Question

Ошибка при вызове функции внутри navigationOptions.

static navigationOptions = {
    tabBarIcon: ({ tintColor })=> (
      <Icon name='ios-add-circle' style={{ color: tintColor}} />
    ),
    tabBarOnPress: () => {
      this.callingFun();
    },
  }

  callingFun = ()=> {
    console.log('tabBarOnPress:');
  }

Ошибка:

Answer 1

const BottomTab = createMaterialTopTabNavigator({
Active:OnlineStack
}, {

    tabBarPosition: 'top',
    tabBarOptions: {
        activeTintColor: 'gray',
        inactiveTintColor: 'white',
        labelStyle: {
            fontSize: 12,
            fontFamily: "Choco_Cooky"
          }, 
        style: {
            backgroundColor: 'black',
            borderWidth: 1,
            borderBottomWidth:0,
            borderColor: 'gray',
          },
    }
    /* Other configuration remains unchanged */
 }
);


 OnlineStack.navigationOptions = ({navigation})=>{
        let { routeName } = navigation.state.routes[navigation.state.index];
        let navigationOptions = {};
        header: null;
        if (routeName === 'Home') {
        navigationOptions.tabBarVisible = false;
        }
        return navigationOptions;
        }

Answer 2

Статические вызовы методов выполняются для класса, а не для экземпляра. Нет ссылки на это в статическом методе. Может достигнуть только статического метода, используя имя класса.

export default class MediaTab extends React.Component {
  static navigationOptions = {
    tabBarIcon: ({ tintColor })=> (
      <Icon name='ios-add-circle' style={{ color: tintColor}} />
    ),
    tabBarOnPress: () => {
      MediaTab.callingFun();
    },
  }

  static callingFun = () => {
    console.log('tabBarOnPress:');
  }
}

Answer 3

Нельзя вызывать callingFun в свойстве статического объекта. Я думаю, что вы хотите это

static navigationOptions = ({navigation}) => {
    return {
        tabBarIcon: ({ tintColor }) => (
            <Icon name='ios-add-circle' style={{ color: tintColor }} />
        ),
        tabBarOnPress: () => {
            navigation.getParam('callingFun')();
        },
    }
}

callingFun = () => {
    console.log('tabBarOnPress:');
}

componentDidMount() {
    const { navigation } = this.props
    navigation.setParams({
        callingFun: this.callingFun,
    })
}