TouchableHighlight onPress不工作

我的功能onPress回報undefined is not a objectTouchableHighlight onPress不工作

這是我的代碼：

import React, {Component} from 'react'; 
 
import {Image, Platform, StatusBar, ListView, TouchableHighlight} from 'react-native'; 
 
import {connect} from 'react-redux'; 
 
import {Actions} from 'react-native-router-flux'; 
 
import { 
 
    Container, 
 
    Content, 
 
    Text, 
 
    Icon, 
 
    View, 
 
    Left, 
 
    Right, 
 
    Header, 
 
    Body, 
 
    Title, 
 
    Animated 
 

 
} from 'native-base'; 
 

 
import styles from './styles'; 
 

 

 
class Championnat extends Component { 
 

 
    constructor(props) { 
 
     super(props); 
 
     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
 
     this.state = { 
 
      dataSource: ds.cloneWithRows([ 
 
       {slug : 'team', name : 'Liqgue1'}, 
 
       {slug : 'worldcup', name : 'Coupe du monde'}, 
 
      ]), 
 
     }; 
 
    } 
 

 
    pressRow(data) { 
 

 
     console.log(data); 
 

 
    } 
 

 
    renderRow(data){ 
 
     return (
 
      <TouchableHighlight onPress={()=> this.pressRow(data)}> 
 
       <View style={styles.lstView}> 
 
        <Image style={styles.lstPicto} /> 
 
        <Text style={styles.lstText}>{data.name}</Text> 
 
        <Icon name="angle-right" right style={styles.lstIcon} /> 
 
       </View> 
 
      </TouchableHighlight> 
 

 
     ) 
 
    } 
 

 
    render() { 
 
     return (
 
      <Container style={styles.container}> 
 

 
       <Header style={styles.header}> 
 
        <Left> 
 
         <Button transparent onPress={() => Actions.pop()}> 
 
          <Icon active name="angle-left"/> 
 
         </Button> 
 
        </Left> 
 
        <Body> 
 
         <Title>Choisir un championnat</Title> 
 
        </Body> 
 
        <Right></Right> 
 
       </Header> 
 

 
       <View style={{flex: 1}}> 
 
        <ListView 
 

 
         dataSource={this.state.dataSource} 
 
         renderRow = {this.renderRow.bind(this)} 
 

 
        ></ListView> 
 
       </View> 
 

 
      </Container> 
 

 
     ) 
 
    } 
 
} 
 

 
export default connect()(Championnat);

來源

2017-05-31 user3646875

裏面的你constructor你需要bind()你的功能，或使用箭頭功能。

constructor() { 
    // your code 
    this.pressRow = this.pressRow.bind(this); 
}

否則，請將您的函數聲明爲箭頭函數。

pressRow = (data) => { 
    // your code 
}

來源

2017-05-31 07:50:36 Dan

感謝的很多你suggeste，但對於你回答， – user3646875

變化renderRow(data)如箭頭功能類似下面片斷

renderRow = (data) => { 
    // your logic 
}

，並確保你pressRow功能應該是箭頭功能

pressRow = (data) => { 
      console.log(data); 
}

希望這會工作。 :)

來源

2017-05-31 10:48:51 Moorthy

感謝。我們可以有整個組件代碼片段。這將有助於發現問題 – user3646875

沒有對不起相同PB ... – user3646875

可以請你給我你的問題更多信息它不工作...同樣PB – Moorthy

這是我的屏幕當我tape在TouchableHighlight。該pb只在TouchableHighlight上存在，如果我更改TouchableHighlight爲Button，則不存在pb。但在官方文檔（https://facebook.github.io/react-native/docs/listview.html），反應過來問上的ListView使用TouchableHighlight

來源

2017-06-01 05:28:12 user3646875

試試這個..它應該工作。當你呈現一個列表視圖，你們每個數據屬於一個唯一的ID ..

pressRow(event) { 
 
    console.log(event); 
 
} 
 

 
renderRow(data, rowID){ 
 
    return (
 
    <TouchableHighlight key={rowID} onPress={()=> this.pressRow(rowID)}> 
 
    <View style={styles.lstView}> 
 
     <Image style={styles.lstPicto} /> 
 
     <Text style={styles.lstText}>{data.name}</Text> 
 
     <Icon name="angle-right" right style={styles.lstIcon} /> 
 
     </View> 
 
    </TouchableHighlight> 
 

 
     ) 
 
}

來源

2017-06-01 05:52:03

Arf，它不適合我... – user3646875

這是我的全部代碼：在renderRow，如果我評論Button一個分解TouchableHighlight它不起作用，如果我評論TouchableHighlight和分解Button，它的工作。

import React, {Component} from 'react'; 
import {Image, Platform, StatusBar, ListView, TouchableHighlight} from 'react-native'; 
import {connect} from 'react-redux'; 
import {Actions} from 'react-native-router-flux'; 
import { 
    Container, 
    Content, 
    Text, 
    Item, 
    Input, 
    Button, 
    Icon, 
    View, 
    Left, 
    Right, 
    Header, 
    Body, 
    Title, 
    Spinner, 
    Animated 

} from 'native-base'; 

import styles from './styles'; 
import * as competition from '../../../services/competition'; 


class ContentLoaded extends Component { 
    render() { 
     return (
      <Text>Hello {this.props.name}!</Text> 
     ); 
    } 
} 

class Competition extends Component { 

    constructor(props) { 

     super(props); 
     this.pressRow = this.pressRow.bind(this); 


     this.state = { 
      dataSource: new ListView.DataSource({ 
       rowHasChanged: (row1, row2) => row1 !== row2, 
      }), 
      loaded: false, 
     }; 

     this.fetchData(); 


    } 

    /** 
    * Cherche les competitions 
    */ 
    fetchData = function() { 

     competition.getAll() 
      .then((data) => { 

       console.log(data); 

       this.setState({ 
        dataSource: this.state.dataSource.cloneWithRows(data), 
        loaded: true, 
       }); 

      }) 
      .catch((exception) => { 

       console.log('competition controller 47', exception); 

      }); 

    } 

    /** 
    * Click sur une competiotn 
    * @param data 
    */ 
    pressRow = (data, rowId) => { 

     console.log(data); 
     console.log(rowId); 


    } 

    /** 
    * render d'une ligne 
    * @param data 
    * @returns {XML} 
    */ 
    renderRow(data, rowId){ 
     return (
      //<TouchableHighlight key={rowID} style={styles.lstView} onPress={()=> this.pressRow(rowId)}> 

       <Button style={styles.lstView} onPress={()=> this.pressRow(data, rowId)}> 
        <Image style={styles.lstPicto} /> 
        <Text style={styles.lstText}>{data.name}</Text> 
        <Icon name="angle-right" right style={styles.lstIcon} /> 
       </Button> 

      //</TouchableHighlight> 

     ) 
    } 

    /** 
    * Affichage conditionnek 
    * @returns {XML} 
    * @constructor 
    */ 
    ContentLoaded() { 

     if (!this.state.loaded) { 
      return <Text> 
       Loading movies... 
      </Text> 
     } 

     return <ListView 

      dataSource={this.state.dataSource} 
      renderRow = {this.renderRow.bind(this)} 

     ></ListView> 


    } 

    /** 
    * Render 
    * @returns {XML} 
    */ 
    render() { 

     return (
      <Container style={styles.container}> 

       <Header style={styles.header}> 
        <Left> 
         <Button transparent onPress={() => Actions.pop()}> 
          <Icon active name="angle-left"/> 
         </Button> 
        </Left> 
        <Body> 
         <Title>Choisir un championnat</Title> 
        </Body> 
        <Right></Right> 
       </Header> 

       <View style={{flex: 1}}> 
        {!this.state.loaded ? (
         <Spinner size="small" color="#000000" /> 
        ) : (
         <ListView 

          dataSource={this.state.dataSource} 
          renderRow = {this.renderRow.bind(this)} 

         ></ListView> 
        )} 
       </View> 

      </Container> 

     ) 
    } 
} 

export default connect()(Competition);

來源

2017-06-02 08:49:20 user3646875

你pressRow需要收到兩個參數，但裏面TouchableHighlight你也發送rowId ..嘗試拷貝this.pressRow（數據，rowId）裏面的按鈕onPress ... –

TouchableHighlight onPress不工作

回答

相關問題