在React Native中通过GridView中的位置获取价值

Question

import React, { Component } from "react";
    import {
      Platform,
      StyleSheet,
      TextInput,
      Text,
      View,
      Image,
      ScrollView,
      TouchableOpacity
    } from "react-native";
    import Svg, {
      G,
      Circle,
      Rect,
      Symbol,
      Defs,
      Use,
      path
    } from "react-native-svg";
    import CardView from "react-native-cardview";
    import GridView from "react-native-super-grid";
    import { Actions } from "react-native-router-flux";
    import Global from "./Global";
    // import { KeyboardAvoidingView } from "react-native";
    // import { KeyboardAwareView } from "react-native-keyboard-aware-view";
    export default class Service extends Component<Props> {
      state = {
        data: []
      };
      componentDidMount() {
        return fetch("http://stackoverflow.net/api/Values/GetServices/1", {
          method: "POST",
          headers: new Headers({
            "Content-Type": "application/x-www-form-urlencoded" // 
        })
          .then(response => response.json())
          .then(responseJson => {
            this.setState({
              data: responseJson
            });
          })
          .catch(error => {
            console.error(error);
          });
      }
      gotoallservice = () => {
        let a = this.state.data[0].id;
    
        let g = Global.getInstance();
        g.setServiceId(a);
        Actions.allservice();
      };
      render() {
        return (
          <View style={styles.container}>
            {/* <KeyboardAwareView animated={true}> */}
            <View style={styles.Banner}>
              <View style={styles.bannercontent}>
                <Image
                  source={require("./Image/token.png")}
                  style={{ width: 50, height: 50, alignItems: "center" }}
                />
                <View style={{ flexDirection: "column" }}>
                  <Text
                    style={{
                      color: "white",
                      marginStart: 30,
                      fontSize: 23,
                      fontWeight: "bold"
                    }}
                  >
                    CHOOSE THE {"\n"}
                    SERVICE
                  </Text>
                  <Text style={{ color: "white", marginStart: 30, fontSize: 17 }}>
                    select the service you wish to generate
                    {"\n"}
                    the token number for
                  </Text>
                </View>
              </View>
            </View>
            <View style={styles.Content}>
              <GridView
                itemDimension={130}
                items={this.state.data}
                style={styles.gridView}
                renderItem={item => (
                  <CardView
                    style={{
                      flex: 1,
                      flexDirection: "row",
                      alignItems: "center",
                      justifyContent: "center"
                    }}
                    cardElevation={5}
                    cardMaxElevation={5}
                    cornerRadius={5}
                  >
                    <TouchableOpacity onPress={this.gotoallservice}>
                      <View style={[styles.itemContainer]}>
                        <Text style={styles.itemName}>{item.serviceName}</Text>
                      </View>
                    </TouchableOpacity>
                  </CardView>
                )}
              />
            </View>
    
            {/* </KeyboardAwareView> */}
          </View>
        );
      }
    }
    
   

我正在使用网格视图并使用Post方法填充它，现在我想使用警报按网格位置显示id，现在在按时，我需要与特定行相关的数据...就像我们在android中所做的那样，我们按位置获取数据...

我使用let a = this.state.data [0] .id; 它给第一个项目本身的ID，我需要按位置显示ID  请帮我解决

Answer 1

您可以使用currying保留所选项目的位置。

您的代码中需要进行2次更改

首先，将gotoallservice更改为

gotoallservice = (index) => () => {
  let a = this.state.data[index].id;
  ...
}

第二，在renderItem中更改GridView组件的itemIndex以使用onPress参数和TouchableOpacity处理程序

renderItem={(item, sectionID, rowID, itemIndex) => (
  <CardView
    ...
    <TouchableOpacity onPress={this.gotoallservice(itemIndex)}>
      <View style={[styles.itemContainer]}>
      ...
      </View>
   </TouchableOpacity>
  </CardView>)
}

希望这会有所帮助！