如何在 react-native 的函数中调用函数？

Question

嗨，这是我第一次使用 javascript 和 react-native 开发应用程序，这是一个菜鸟问题。如何在 __onRegionChangeComplete 函数中调用 _getData 函数？我试过 this._getData() 它显示

error: undefined is not a function(evaluation'this._getData()')').

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

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

class Map extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MapView style={styles.map} 
          showsUserLocation={true}
          onRegionChangeComplete={this._onRegionChangeComplete}
        />
      </View>
    );
  }

  _onRegionChangeComplete(region)
  {

  }

  _getData()
  {

  }
}

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

module.exports = Map;

Answer 1

您应该解决一个可能导致错误的语法注释：在 class 中的每个方法的右括号后添加一个逗号。尝试并编辑您的 post 以查看是否有任何错误。（抱歉，我会把它放在评论中，但没有足够的声誉！）

Answer 2

将extends组件改成createclass，在每个函数后面加逗号即可解决。阅读关于它们的简要介绍是 createclass 具有自动绑定功能，而 extends component 不会为您执行此操作，因此您必须自己绑定它们。

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;

Answer 3

举个例子，希望对你有帮助。

1.Of当然可以用ES5的feature(createClass)代替ES6的(extends class)方法来解决这个绑定问题

2.You 可以继续使用ES6，只是小心绑定this。例如在我的组件

_func1(){
    ...
}

_func2(){
  this._func1()
}

如果我想在func2中调用_func1()，'this'绑定到_func2本身，当然那里没有func1()

但是如果我在调用_func2()时将_func2()绑定到组件上下文，问题就解决了。

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

希望对你有帮助。

Answer 4

这个例子肯定有用

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

Answer 5

你必须使用 ES6 的方式来做一个功能，否则它不会工作，特别是对于更高的版本，比如 0.59。在 class 中调用函数时，下面的代码应该可以工作。您已经正确地使用 this._onRegionChangeComplete、

调用该函数

  constructor(props) { 
  super(props); 
  this.state = {sliderValue: 15,}
  }

  var Map = React.createClass({
     render(){
     return (
     <View style={styles.container}>
        <MapView style={styles.map} 
         showsUserLocation={true}
         rotateEnabled={false}
         onRegionChangeComplete={this._onRegionChangeComplete}
    />
  </View>
    );
 },
  _onRegionChangeComplete=()=>
    {
        //Your code here. you can use this.variable if you want to use variables from 
        //your constructor(props) { super(props); this.state = {sliderValue: 15,} }

       //Example passing variable
       let Myvalue = this.state.sliderValue;

     }

如何在 react-native 的函数中调用函数？

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

javascript

react-native