Question

我想用数组中的键值显示模型，但是我不能这样做，而且我不能理解这个问题。

这是世博会的原生反应，我使用了反应原生元素

＆＃13;

import React, {Component} from "react";
import { ScrollView, Text, Linking, View, Modal } from "react-native";
import { Card, Button } from "react-native-elements";
import PriceDetail from "./PriceDetail";

const images = [
  {
    key: 1,
    name: "Nathan Anderson",
    image: require("../images/1.jpg"),
    url: "https://unsplash.com/photos/C9t94JC4_L8"
  },
  {
    key: 2,
    name: "Jamison McAndie",
    image: require("../images/2.jpg"),
    url: "https://unsplash.com/photos/waZEHLRP98s"
  },
  {
    key: 3,
    name: "Alberto Restifo",
    image: require("../images/3.jpg"),
    url: "https://unsplash.com/photos/cFplR9ZGnAk"
  },
  {
    key: 4,
    name: "John Towner",
    image: require("../images/4.jpg"),
    url: "https://unsplash.com/photos/89PFnHKg8HE"
  }
];

class Home extends Component {

  state = {
    selectedItem : null,
    mvisible : false
  }

  modalClosedHandler = () => {
    this.setState({
      mvisible: false,
      selectedItem: null
    });
  };

  productSelectedHandler = key => {
    this.setState(prevState => {
      return {
        selectedItem: prevState.images.find(image => {
          return image.key === key;
        })
      };
    });
    console.log(selectedItem);
  };

  showModal = (key) => {
    this.setState({
        mvisible: true,
        selectedItem: key
      });
  }


  render () {
    return (
      <View style={{ flex: 1 }}>
      <Modal 
        visible={this.state.mvisible}
        onRequestClose={this.modalClosedHandler}>
        <View style={{flex : 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>Hello this is modal{this.state.selectedItem}</Text>
        <Button title="Close" onPress={this.modalClosedHandler}/>
        </View>
      </Modal>
      <ScrollView contentContainerStyle={{ paddingVertical: 20 }}>
        {images.map(({ name, image, url, key }) => (
          <Card title={`Product ${key}`} image={image} key={key}>
            <Text style={{ marginBottom: 10 }}>
              Photo by {name}.
            </Text>
            <Button
              backgroundColor="#03A9F4"
              title="VIEW NOW"
              onPress={(key)=>this.showModal(key)}
            />
          </Card>
        ))}
      </ScrollView>
    </View>
    );    
  }
}

export default Home;

＆＃13;

我是新来的本地人。

Answer 1

您无法获得按钮的第一个参数onPress。

这是错误的：

<Button
          backgroundColor="#03A9F4"
          title="VIEW NOW"
          onPress={(key)=>this.showModal(key)}            
/>

您已经拥有更高级别的密钥，因此您应该使用以下代码：

<Button
          backgroundColor="#03A9F4"
          title="VIEW NOW"
          onPress={()=>this.showModal(key)}            
/>

Answer 2

我不太清楚，但如果你在调用this.showModal时遇到问题是因为你有一个额外的“密钥”。

替换

<Button
backgroundColor="#03A9F4"
title="VIEW NOW"
onPress={(key)=>this.showModal(key)}
/>

通过

<Button
backgroundColor="#03A9F4"
title="VIEW NOW"
onPress={()=>this.showModal(key)}
/>

无法在React Navite元素按钮中将值作为函数传递

2 个答案: