Question

我正在尝试制作一个充满按钮的列表视图，如果单击按钮，它会将该按钮上的信息发送到下一页。我已设法使列表视图正确，并且按钮能够导航到下一页，但我无法设法如何使用rowID来确定按下哪个按钮。我有以下代码但由于某种原因rowID给出错误undefined不是一个对象，当它被点击，当我用一个数字（比如1）更改rowID它完美，任何想法？

非常感谢

    var woolworths = {
  'title': "Woolworths",
  "description":'"Lorem ipsum dolor sit amet, consectetur adipiscing elit,  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."',
  'img': require('../assets/woolworths.jpg')
};

var checkers = {
  'title': "Checkers",
  "description":'"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."',
  'img': require('../assets/checkers.jpeg')
};

var picknpay = {
  'title': "Pick 'n Pay",
  "description":'"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit    anim id est laborum."',
  'img': require('../assets/picknpay.jpg')
};

var partners = [woolworths, checkers, picknpay];

class Partners extends React.Component{
  constructor(props){
    super(props)
    this._renderRow = this._renderRow.bind(this);
     this.gotoPartner = this.gotoPartner.bind(this);
    this.ds= new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !==     r2})
    this.state = {
      dataSource: this.ds.cloneWithRows(this._partners()),
    }
  }
  gotoPartner(rowID:number){
    this.props.navigator.push({
        title: partners[rowID].title,
        component: Partner,
         passProps: {partner:partners[0]},
         backButtonTitle: 'Back',
      });
  };

    _partners(){
      var dataBlob = []
      for (var ii = 0; ii < partners.length; ii++) {
        dataBlob.push(partners[ii].title);
      }
      return dataBlob;
    }


_renderRow(rowData, rowID){
  return(
    <View>
      <TouchableHighlight
                  style={styles.button}
                  onPress={() => this.gotoPartner(rowID)}
                  underlayColor='transparent'>
                    <View style={styles.textimgholder}
                    >
                        <Text style={styles.buttonTitle}>{rowData}</Text> 
                        <View style={styles.imgHolder}>
                            <Image source=            {require('../assets/arrowIcon.png')} 
                              style={styles.arrowIcon}/>
                        </View>
                    </View>
                </TouchableHighlight>
                <Separator />
    </View>
    )
}
  render () {
    return(
      <ScrollView style={styles.mainContainer}>
      <FullSep />
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this._renderRow}
      />
        </ScrollView>

      )
  }
};

Answer 1

renderRow有四个参数：rowData，sectionID，rowID，highlightRow

renderRow(rowData, sectionID, rowID, highlightRow){
    return(
      <View>
        <TouchableHighlight
      style={styles.button}
      onPress={() => this.gotoPartner(rowID)}
  underlayColor='transparent'>
          <View style={styles.textimgholder}>
            <Text style={styles.buttonTitle}>{rowData}</Text> 
           </View>
       </TouchableHighlight>
     </View>
   )
}

如果需要获取rowID，则需要首先传入sectionID，然后传递rowID。

我已经设置了一个工作版本，在点击时提醒合作伙伴[rowID]：https://rnplay.org/apps/OyyXlw

Answer 2

看起来你正在呼叫title: partners[rowID].title，也许它应该是title: this._partners[rowID].title。其他一切对我来说都很好。

React Native rowID给出错误undefined不是对象

2 个答案: