Question

我正在使用PhotoGrid库本地反应来填充我的应用程序上的照片列表。如何从渲染函数中调用函数？当我调用一个名为＆＃34; deva＆＃34;的函数时，它会显示this错误我在<Button onPress={()=>{this.deva()}}><Text>Bondan</Text></Button>的OnPress方法。这是我的代码......

＆＃13;

import React from 'react';
import { StyleSheet, Text, View, WebView, TouchableOpacity, Image, Alert, Dimensions} from 'react-native';
import {DrawerNavigator} from 'react-navigation'
import {Container, Header, Button, Icon, Title, Left, Body, Right, Content} from 'native-base'
import PhotoGrid from 'react-native-photo-grid'

import HomeScreen from './HomeScreen'


export default class Recomended extends React.Component {

  constructor() {
    super();
    this.state = { items: [],
      nama : ""
    }
  }

  goToBufetMenu(){
    this.props.navigation.navigate("BufetMenu");
  }



  componentDidMount() {
    // Build an array of 60 photos
    let items = Array.apply(null, Array(60)).map((v, i) => {
      return { id: i, src: 'http://placehold.it/200x200?text='+(i+1) }
    });
    this.setState({ items });

    //this.setState({ nama: "Bondan"});
    //this.props.navigation.navigate("BufetMenu");
  }

  deva() {
    Alert.alert('deva');
  }

  render() {
    return (
      <Container style={styles.listContainer}>
        <PhotoGrid
          data = { this.state.items }
          itemsPerRow = { 3 }
          itemMargin = { 3 }
          renderHeader = { this.renderHeader }
          renderItem = { this.renderItem }
          style={{flex:2}}

        />
    </Container>

    );

  }

  renderHeader() {
    return(
      <Button onPress={()=>{this.deva()}}><Text>Bondan</Text></Button>
    );
  }

  renderItem(item, itemSize) {
    return(

      <TouchableOpacity
        key = { item.id }
        style = {{ width: itemSize, height: itemSize }}
        onPress = { () => {
          this.deva();
        }}>
        <Image
          resizeMode = "cover"
          style = {{ flex: 1 }}
          source = {{ uri: item.src }}
        />

      <Text>{item.src}</Text>

      </TouchableOpacity>
    )
  }
}






const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    height: 587,
  },
  gridText: {
    color: '#fff',
    textAlign: 'center',
    fontStyle: 'normal',
    fontSize : 12
  },
  listContainer: {
    height: Dimensions.get('window').height - (Dimensions.get('window').height*53/100),
  }
});

＆＃13;

Answer 1

将deva方法定义更改为箭头功能 -

deva= () => {
  Alert.alert('deva');
}

或者将deva方法绑定到构造函数中的this

constructor() {
  super();
  this.state = { items: [],
    nama : ""
  }
  this.deva = this.deva.bind(this)
}

您收到错误，因为当使用deva调用this.deva()方法时，javascript运行时无法在deva {＆＃39}上找到属性/函数this。 s with with（在这种情况下是传递给onPress的匿名回调）。但是，如果事先将this绑定到deva，则javascript运行时正在搜索正确的this。

Answer 2

你正在失去this的背景。您需要使用箭头函数或绑定函数。

示例

constructor() { super(); this.state = { items: [], nama : "" }; this.renderHeader = this.renderHeader.bind(this); this.renderItem = this.renderItem.bind(this); }

或

renderHeader = () => { // rest of your code } renderItem = (item, itemSize) => { // rest of your code }

从PhotoGrid渲染函数库调用函数

2 个答案: