How to call function in a function on react-native?

Let me show you an example, and hope it helps you.

1.Of course, you can use ES5 feature(createClass) instead of ES6(extends class) method to solve this binding problem.

2.You can keep using ES6, just be careful with binding this. For example in my component

_func1(){
    ...
}

_func2(){
  this._func1()
}

if I want to call _func1() in func2, 'this' is binded to _func2 itself, of course, there is no func1() there.

But if I bind _func2() to component context when I call _func2(), problem will be solved.

<subComponent subProp = {this._func2.bind(this)} />

Hope it helps you.

Solve it by changing the extends Component to createclass and adding commas after each function. read a brief introduction about them is that createclass have autobinding for function and extends component does not do that for you, so you have to bind them yourself.

var React = require('react-native');

var {
  StyleSheet,
  Text,
  View,
  Image,
  MapView,
  Component,
} = React;

var Map = React.createClass({
  render(){
    return (
      <View style={styles.container}>
        <MapView style={styles.map} 
          showsUserLocation={true}
          rotateEnabled={false}
          onRegionChangeComplete={this.onRegionChangeComplete}
        />
      </View>
    );
  },

  onRegionChangeComplete(region) {
    this.getData(region)
  },

  getData(region) {

  },
});

var styles = StyleSheet.create({
  container:{
    flex: 1
  },
  map: {
    flex: 1,
  },
  image: {
    width: 64,
    height: 64
  }
});

module.exports = Map;

This example sure helpful

export default class Setup extends Component {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  render() {
    return (
      <View style={styles.container}>
      <View>
        <Text h1>Login</Text>
        </View>
        <View>
        <Button
          onPress={this._onPressButton}
          title="Learn More"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
        </View>
      </View>
    );
  }
}