React native navigationOptions calling function error

问题

Got an error when call a function inside navigationOptions.

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

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

Error:

回答1:

You can not call callingFun in static object property. I think that you want this

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,
    })
}

回答2:

Static method calls are made on the class, not on the instance. There is no way to reference this in static method. Can only reach a static method using the name of the class.

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:');
  }
}

回答3:

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;
        }

回答4:

I've resolved the issue be the following way:

static navigationOptions = ({ navigation }) => {
    return {
        headerRight: () => (

            <TouchableOpacity
                onPress={navigation.getParam('onPressSyncButton')}>
                <Text>Sync</Text>
            </TouchableOpacity>
        ),
    };
};

componentDidMount() {
    this.props.navigation.setParams({ onPressSyncButton: this._onPressSyncButton });
}

_onPressSyncButton = () => {
     console.log("function called");
}

来源：https://stackoverflow.com/questions/53166401/react-native-navigationoptions-calling-function-error

标签

react-native

react-navigation