如何在本机反应中获取列表视图的渲染行ID答案

【问题标题】：How to get render row ID of listview in react native如何在本机反应中获取列表视图的渲染行ID
【发布时间】：2016-08-16 01:31:56
【问题描述】：

代码：

'use strict'
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableOpacity,
  TouchableHighlight,
  Button,
  ListView,
  ScrollView
} from 'react-native';

// import Styles
import CommonStyles from 'AxESS/src/styles/CommonStyles.js'
import FormStyles from 'AxESS/src/styles/FormStyles.js'
import StatusBar from 'AxESS/src/utility/StatusBar.js'

import Icon from 'react-native-vector-icons/Ionicons'
//import firebaseApp from 'AxESS/src/components/firebaseconfig'
import Newsfeed from './Newsfeed.js'

class Groups extends Component {
  constructor(props){
     super(props);

     this.state = {
     newGroup: '',
     groupSource: new ListView.DataSource({
       rowHasChanged: (row1, row2) => row1 !== row2
     })
   };

   this.groupslist = [];
  }

  componentDidMount() {
// When a group is added
   this.groupslistRef = firebaseApp.database().ref('/groupslist/');
   this.groupslistRef.on('child_added', function(snapshot){

     //var groupID = snapshot.key;
     //var text = snapshot.val();
     this.groupslist.push({
       text: snapshot.val(),
       id: snapshot.key
     });



     this.setState({
       groupSource: this.state.groupSource.cloneWithRows(this.groupslist )
     });

   }.bind(this));

}

onButtonPress(){
  const { navigator} = this.props;
   var $this = this;
   this.props.navigator.push({
     id: 'Newsfeed',
     title: 'Newsfeed',

   })

   this.groupslistRef = firebaseApp.database().ref('/groupslist/');
   this.groupslistRef.on('child_added', function(snapshot){

   var groupID = snapshot.key;

     });

   };


  render(){
    return (
          <View style={CommonStyles.bodyLayout}>
          <StatusBar title='My Groups'/>
          <View style={CommonStyles.mainContent}>
              <ListView
                  enableEmptySections={true}
                  dataSource={this.state.groupSource}
                  renderRow={this.renderRow.bind(this)}>
              </ListView>
          </View>

          </View>

    );
  }


  renderRow(rowData) {
    return (
      <TouchableHighlight
        underlayColor='#dddddd'
        //onPress={() => this.removeTodo(rowData)}
        onPress={this.onButtonPress.bind(this)}
        >
        <View>
          <View style={styles.row}>
            <Text style={styles.groupText}>
               {rowData.text.groupName}
               {rowData.id}
            </Text>
          </View>
            <View style={styles.separator} />
        </View>
      </TouchableHighlight>
    );
  }
}

const styles = StyleSheet.create({
  //scroller design
  textView:{
    padding: 15,
  },
  row: {
    flexDirection: 'row',
    padding: 12,
    height: 44
  },
  separator: {
    height: 1,
    backgroundColor: '#CCCCCC',
  },
  groupText: {
    //flex: 10,
  }
});



module.exports = Groups

数据库结构：

{
  "groupslist" : {
    "-KOrcwQQtiKrD0_jhJ6R" : {
      "groupName" : "GroupF",
      "groupOwner" : "rF3vAg1mU8P4xhnfsvEXDsQmbYF3",
      "name" : true
    },
    "-KOsErKiujWlONRKqMCf" : {
      "groupName" : "GROUPG",
      "groupOwner" : "rF3vAg1mU8P4xhnfsvEXDsQmbYF3"
    },
    "-KOsaE3Rtc-QWAnd_lsg" : {
      "groupName" : "GroupJ",
      "groupOwner" : "rF3vAg1mU8P4xhnfsvEXDsQmbYF3"
    },
    "-KOsayxCN6lGuEpR4vQd" : {
      "groupName" : "GroupA",
      "groupOwner" : "rF3vAg1mU8P4xhnfsvEXDsQmbYF3"
    },
    "-KOsbT_x5jUp8PE2-l3l" : {
      "groupName" : "GroupA",
      "groupOwner" : "rF3vAg1mU8P4xhnfsvEXDsQmbYF3"
    },
    "-KOsenmBUVuCXNeJRGSW" : {
      "groupName" : "GroupC",
      "groupOwner" : "rF3vAg1mU8P4xhnfsvEXDsQmbYF3",
      "photoURL" : {
        "uri" : "/Users/developer/Library/Developer/CoreSimulator/Devices/11EE597E-F12A-4F35-A702-110AC249AEAA/data/Containers/Data/Application/041BCA4F-49FE-40BE-A483-112D29A0603C/Documents/images/36A6FC5C-A4E0-4656-9335-35D2C2538012.jpg"
      }
    },
    "-KOslnAcKQRZjZLNykUK" : {
      "groupName" : "GroupA",
      "groupOwner" : "rF3vAg1mU8P4xhnfsvEXDsQmbYF3",
      "members" : true,
      "photoURL" : {
        "uri" : "/Users/developer/Library/Developer/CoreSimulator/Devices/11EE597E-F12A-4F35-A702-110AC249AEAA/data/Containers/Data/Application/041BCA4F-49FE-40BE-A483-112D29A0603C/Documents/images/F74C6975-E819-453B-8B34-3C71A12097E0.jpg"
      }
    }
  },
  "items" : {
    "-KNo9Pc073971UmgTis7" : {
      "title" : "test",
      "user_id" : "rF3vAg1mU8P4xhnfsvEXDsQmbYF3"
    },
    "-KNo9Q8lr2B2MyswVO6A" : {
      "title" : "test",
      "user_id" : "rF3vAg1mU8P4xhnfsvEXDsQmbYF3"
    },
    "-KNo9Qdu1pyTMtV3M8qH" : {
      "title" : "test",
      "user_id" : "rF3vAg1mU8P4xhnfsvEXDsQmbYF3"
    },
    "-KNoA-DweYWdYlesZ4UR" : {
      "title" : "test",
      "user_id" : "rF3vAg1mU8P4xhnfsvEXDsQmbYF3"
    },
    "-KNoA-kdhe4Ndw8rl8hf" : {
      "title" : "test",
      "user_id" : "rF3vAg1mU8P4xhnfsvEXDsQmbYF3"
    },
    "-KNoA0Ds2wvSD_h5I5y3" : {
      "title" : "test",
      "user_id" : "rF3vAg1mU8P4xhnfsvEXDsQmbYF3"
    },
    "-KNoA6Utw3X_VEo88l99" : {
      "title" : "test2",
      "user_id" : "rF3vAg1mU8P4xhnfsvEXDsQmbYF3"
    },
    "-KNoGoOZ6eCaYf3jx8FO" : {
      "title" : "test3",
      "user_id" : "rF3vAg1mU8P4xhnfsvEXDsQmbYF3"
    }
  },
  "profileimages" : {
    "MIqV0sgVE2WoaS847y1lkxnMDXs1" : {
      "photoURL" : "https://firebasestorage.googleapis.com/v0/b/axteam-908ba.appspot.com/o/profileimages%2FMIqV0sgVE2WoaS847y1lkxnMDXs1?alt=media&token=93fa87b1-0ee7-4e91-ad9f-f8886dde8105",
      "uid" : "MIqV0sgVE2WoaS847y1lkxnMDXs1"
    },
    "YTs5zEVLNYWbY3GXxEVDzbDy1lU2" : {
      "photoURL" : "https://firebasestorage.googleapis.com/v0/b/axteam-908ba.appspot.com/o/profileimages%2FYTs5zEVLNYWbY3GXxEVDzbDy1lU2?alt=media&token=7acc7378-9539-42da-8c39-0010c1435df5",
      "uid" : "YTs5zEVLNYWbY3GXxEVDzbDy1lU2"
    }
  },
  "users" : {
    "MIqV0sgVE2WoaS847y1lkxnMDXs1" : {
      "photoURL" : "https://firebasestorage.googleapis.com/v0/b/axteam-908ba.appspot.com/o/profileimages%2FMIqV0sgVE2WoaS847y1lkxnMDXs1?alt=media&token=e58f4a0a-ef93-400e-8faa-e7d1e21ebf71",
      "uid" : "MIqV0sgVE2WoaS847y1lkxnMDXs1",
      "userName" : "user1"
    },
    "NIqV0sgVE2WoaS847y1lkxnMDXs1" : {
      "photoURL" : "https://firebasestorage.googleapis.com/v0/b/axteam-908ba.appspot.com/o/profileimages%2FMIqV0sgVE2WoaS847y1lkxnMDXs1?alt=media&token=e58f4a0a-ef93-400e-8faa-e7d1e21ebf71",
      "uid" : "NIqV0sgVE2WoaS847y1lkxnMDXs1",
      "userName" : "user2"
    }
  }
}

我已将 react-native 与 firebase 一起使用来创建群组页面。单击列表视图的特定行后，我希望能够进入一个页面，该页面可以列出属于该组的所有成员。但我不知道如何让 groupId 与 rowID 链接。

有没有人知道如何通过更改我当前的代码来实现这一点？

【问题讨论】：

标签： listview firebase react-native

【解决方案1】：

由于时间限制，我无法针对您的特殊情况编写代码。但这是你可以做的-

创建一个新的有状态组件（在 es6 中使用 class）。
将其拉入当前页面。
将group_id 和navigator 作为道具传递给该组件。
您可以渲染新创建的组件，而不是在renderRow() 中渲染TouchableHighlight。
由于新创建的组件将 group_id 作为 prop 传递，因此您可以使用 navigator 为 push 编写一个新的 View 方法，该方法也作为 prop 提供。

我希望这对你有意义。如果您有任何疑问，请告诉我。

【讨论】：