Home / Questions / 264270
Accepted
Noob Dev
Asked: 2020-05-17 11:23:04 +0800 CST 2020-05-17 11:23:04 +0800 CST

Access a class function from the header in React Native

  • 772

My problem is that I cannot access a function of the same class from a button that I have in the header.

I would like to know how to access

I have made two functions, one similar to the change of screen from the header, but trying to access a function instead of another screen.

And another way suggested by someone else which doesn't work either.

class HomeScreen extends React.Component {
        static navigationOptions = ({ navigation }) => {
            return {
                headerTitle: ('',
                    ...
                ),


                headerLeft: (
                    ...
                ),

                headerRight: (
                    <TouchableHighlight onPress={() => { this._function() }}>
                        <Image style={{ width: 30, height: 30, marginLeft: 10 }}
                            source={require('./images/reportIcon.png')}
                        />
                    </TouchableHighlight>
                ),
                //Segunda manera
                headerRight: (
                    <TouchableHighlight onPress: () => { navigation.getParam('report') }>
                        <Image style={{ width: 30, height: 30, marginLeft: 10 }}
                            source={require('./images/reportIcon.png')}
                        />
                    </TouchableHighlight>
                )
            }
        }

        constructor(props) {
            super(props);
            this.state = {
                ...
          }
        }

        _function = () => {
            Alert.alert(
                'Titutlo',
                'Blablabla',
                [{ text: 'Entendido' }]
            );
        }
    }

The first way sends me an error.

The second one does not mark errors but does not give any action, BEWARE: I have the function in ComponentDidMount, but it still doesn't work

react-native

1 Answers

  1. Best Answer

    It is normal that you do not see that any function does something, the first because it is a static method, that is to say that it does not have an instance but rather that it belongs to the class, that is, it is incorrect to call thiswhen you define a method with static, the ideal would be So HomeScreen._function(), which may not work well for you, since _functionif it is an instance method, the ideal would be to do something like this:

    const instanceHome = new HomeScreen();  // <= Creamos la instancia
return instanceHome._function();  // <= Llamamos al método

    Or else convert _functionto static, like so:

    static _function = () {
  Alert.alert(
    'Titutlo',
    'Blablabla',
    [{ text: 'Entendido' }]
  );
}

    But remember that inside a function that you define with staticyou should not use this.

    The second option doesn't do anything because you're not telling it to do anything, you're just telling it to execute the method navigation.getParam('report')but you're neither returning nor treating the data in any way, you're not changing anything, nor calling any other internal function, you're not logging either, so you don't notice anything happening.

    Any concern, ask

    • 2