如何使用 Modal 只获得一个值

Question

我正在使用 Modal，但出现问题，使用 Modal 我从 About 获得了所有 name，但没有我只得到一个值。我只需要使用 Modal

取一个值

import React, { Component } from "react";
import { Text, View } from "react-native";
import Modal from "react-native-modal";

export default class App extends Component {
  state = {
    visible: false
  };

  renderMap() {
    const About = [
      {
        name: "Gabe",
        msg: "Hello",
        img: "Some Img"
      },
      {
        name: "Amanda",
        msg: "Hi",
        img: "Another img"
      },
      {
        name: "Cauã",
        msg: "Whats up ",
        img: "Another img"
      }
    ];

    const Choose = About.map((info) => {
      return (
        <View style={{ width: 180, backgroundColor: "red", marginTop: 10 }}>
          <Text
            onPress={() => {
             // console.log(info.name); 
            // delete the MODAL and try out this only with the console.log
              this.setState({
                visible: true
              });
            }}
          >
            Click on the Title
          </Text> 

          <Modal isVisible={this.state.visible}>{console.log(info.name)}</Modal>

        </View>
      );
    });

    return Choose;
  }

  render() {
    return <View>{this.renderMap()}</View>;
  }
}

查看完整内容project

你看到了吗？没有 Modal，我在 console.log() 上得到了准确的值，但是有了 Modal，我得到了三个值。我需要一些使用 Modal

获得价值的东西

Answer 1

好办法

import React, { Component } from "react";
import { Text, View } from "react-native";
import Modal from "react-native-modal";

export default class App extends Component {
  state = {
    visible: false,
    userInfos: null
  };

renderMap() {
    const About = [
      {
        name: "Gabe",
        msg: "Hello",
        img: "Some Img"
      },
      {
        name: "Amanda",
        msg: "Hi",
        img: "Another img"
      },
      {
        name: "Cauã",
        msg: "Whats up ",
        img: "Another img"
      }
    ];

    const Choose = About.map((info) => {
      return (
        <View style={{ width: 180, backgroundColor: "red", marginTop: 10 }}>
          <Text
            onPress={() => {
              this.setState({
                visible: true,
                userInfos: info
              });
            }}
          >
            Click on the Title
          </Text> 
        </View>
      );
    });

    return Choose;
  }

  render() {
    return(
        <View>
            {this.renderMap()}
            <Modal isVisible={this.state.visible}>
                <Text>{this.state.userInfos.name}</Text>
            </Modal>
        </View>
    )
  }
}

如何使用 Modal 只获得一个值

How to get only ONE value using Modal

dictionary

modal-dialog

react-native