如何传递数据项以响应本机模态

Question

我试图通过单击“查看模态”按钮将数据项传递给react本机模态，但似乎我的代码中缺少某些内容。

这里是循环显示在时间轴屏幕上的数据对象

Object {
  "farmer_id": "4",
  "farmer_name": "Joshua Adebisi",
  "id": "4",
  "product_description": "The grains of rice is good for healthy.It is durable,I
t is Awesome Intesrest buyers can contact via contact 08073047104.",
  "product_image": "https://via.placeholder.com/600/cb47e2",
  "product_name": "5kg Grains of Rice",
  "profile_img": "https://via.placeholder.com/150/cb47e2",
  "uploaded_time": "2019-06-10 23:48:04",
}
Object {
  "farmer_id": "3",
  "farmer_name": "Omolewa Stephen",
  "id": "3",
  "product_description": "The grains of rice is good for healthy.It is durable,I
t is Awesome Intesrest buyers can contact via contact 08073047104.",
  "product_image": "https://via.placeholder.com/600/4dcdf6",
  "product_name": "5kg Grains of Rice",
  "profile_img": "https://via.placeholder.com/150/cb47e2",
  "uploaded_time": "2019-06-10 23:48:04",
}
Object {
  "farmer_id": "2",
  "farmer_name": "Salami Paul",
  "id": "2",
  "product_description": "The grains of rice is good for healthy.It is durable,I
t is Awesome Intesrest buyers can contact via contact 08073047104.",
  "product_image": "https://via.placeholder.com/600/cb47e2",
  "product_name": "5kg Grains of Rice",
  "profile_img": "https://via.placeholder.com/150/cb47e2",
  "uploaded_time": "2019-06-10 23:48:04",
}
Object {
  "farmer_id": "1",
  "farmer_name": "Adebiyi Samuel",
  "id": "1",
  "product_description": "The grains of rice is good for healthy.It is durable,T
he grains of rice is good for healthy.It is durable.It is Awesome Intesrest buye
rs can contact via contact 08073047104.

",
  "product_image": "https://via.placeholder.com/600/4dcdf6",
  "product_name": "5kg Grains of Beans",
  "profile_img": "https://via.placeholder.com/150/cb47e2",
  "uploaded_time": "2019-06-11 02:56:53",
}

这是时间轴代码

import React, {Component} from 'react';
import {TextInput,Modal,Alert,TouchableHighlight,StyleSheet,RefreshControl ,ScrollView,Dimensions,Image,StatusBar,ActivityIndicator,Text, View,TouchableOpacity,KeyboardAvoidingView} from 'react-native';
import { createBottomTabNavigator,createStackNavigator,createSwitchNavigator, createAppContainer} from "react-navigation";
let {height, width} = Dimensions.get('window');
import { Ionicons } from '@expo/vector-icons';
import { Font } from 'expo';
import { AsyncStorage } from 'react-native';
export default class Timeline extends Component {
  constructor(props){
    super(props)
    console.log(props)
    this.state = {
      username: '',
      photo: '',
      email: '',
      userId: '',
      address: '',
      timeline: [],
      modalVisible: false,
      refreshing: false
    }
  }
 setModalVisible(visible) {
   this.setState({modalVisible: visible});
 }
  Home = () => {
    alert("Home");
  }
  PostTimeline = () => {
    return fetch( "http://texotrack.com/api/user/timeline.php", {
      method: "POST",
      headers:{
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        action: 'fetch'
      })
    }).then((response) => response.json()).then((responseJsonFromServer) => {
        this.setState({
          timeline: responseJsonFromServer
        });
    })
  }

componentDidMount(){
    this.PostTimeline();
    AsyncStorage.getItem("key").then((data) =>{
      const val = JSON.parse(data);
      this.setState({
        username: data.name,
        photo: data.photo,
        email: data.email,
        userId: data.id,
        address: data.address
      })
    })
  }

  render() {
        const timeLineList = this.state.timeline.map((data) => {
          console.log(data);
        const thumbnail = data.profile_img;
        const product_image = data.product_image;
        return (
          <View elevation={5} key={data.id} style={styles.card}>
          <Modal
              animationType="fade"
              transparent={false}
              visible={this.state.modalVisible}
              key={data.id}
              onRequestClose={() => {
                  alert('Modal has been closed.');
               }}>
              <View style={{margin: 10}}>
                <Text style={styles.headerText}>Product details: {data.product_name}</Text>
                <View style={styles.cardheader}>
                  <View style={styles.miniheader}>
                    <Image style={styles.thumbnail} source={{uri: thumbnail}} />
                    <Text style={styles.thumb_name}>{data.farmer_name}</Text>
                  </View>
                  <Text style={styles.timestamp}>{data.uploaded_time}</Text>
                </View>
                <View style={styles.cardbody}>
                  <Image style={styles.cardbody_image} source={{uri: product_image}}/>
                   <Text style={styles.p_name}>{data.product_name}</Text>
                   <Text style={styles.p_desc}>{data.product_description}</Text>
                 <View>
                 </View>
                 </View>

                  <TouchableHighlight
                    onPress={() => {
                      this.setModalVisible(!this.state.modalVisible);
                    }}>
                    <Text>Close</Text>
                  </TouchableHighlight>
                </View>

           </Modal>
            <View style={styles.cardheader}>
              <View style={styles.miniheader}>
                <Image style={styles.thumbnail} source={{uri: thumbnail}} />
                <Text style={styles.thumb_name}>{data.farmer_name}</Text>
              </View>
              <Text style={styles.timestamp}>{data.uploaded_time}</Text>
            </View>
            <View style={styles.cardbody}>
              <Image style={styles.cardbody_image} source={{uri: product_image}}/>
             <Text style={styles.p_name}>{data.product_name}</Text>
             <Text style={styles.p_desc}>{data.product_description}</Text>
             <View>
             <TouchableOpacity
                onPress={() => {
                  this.setModalVisible(true);
                }} style={styles.buttonContainer}>
                <Text style={styles.buttonText}>Show Modal</Text>
              </TouchableOpacity>
             </View>
            </View>
          </View>
        )
      });

      return (
        <View style={styles.container}>
            <View elevation={5} style={styles.mainheader}>
               <Text style={styles.iconTop} onPress={() => this.PostTimeline()}>
                  <Ionicons name="md-refresh" size={32} color="black" />
               </Text>
               <Text style={styles.headerTitle}>Home</Text>
               <Text style={styles.iconTop} onPress={() => this.Home()}>
                  <Ionicons name="md-home" size={32} color="black" />
               </Text>
            </View>

            <View style={styles.content}>
               <View style={{padding: 10}}>
                 <Text style={styles.headerText}><Ionicons name="md-cart"  size={26} color="black" /> Marketplace</Text>
               </View>
               <View style={{flex:1}}>
                 <ScrollView alwaysBounceVertical={true} contentContainerStyle={{ flexGrow: 1}} enabled bounces={true}>
                  {timeLineList}
                 </ScrollView>
               </View>
            </View>
        </View>
      );
    }

  }

这里的重点是带有模式的render方法，单击每个按钮以查看详细信息时如何将数据项传递给模式。谢谢

  render() {
        const timeLineList = this.state.timeline.map((data) => {
          console.log(data);
        const thumbnail = data.profile_img;
        const product_image = data.product_image;
        return (
          <View elevation={5} key={data.id} style={styles.card}>
          <Modal
              animationType="fade"
              transparent={false}
              visible={this.state.modalVisible}
              key={data.id}
              onRequestClose={() => {
                  alert('Modal has been closed.');
               }}>
              <View style={{margin: 10}}>
                <Text style={styles.headerText}>Product details: {data.product_name}</Text>
                <View style={styles.cardheader}>
                  <View style={styles.miniheader}>
                    <Image style={styles.thumbnail} source={{uri: thumbnail}} />
                    <Text style={styles.thumb_name}>{data.farmer_name}</Text>
                  </View>
                  <Text style={styles.timestamp}>{data.uploaded_time}</Text>
                </View>
                <View style={styles.cardbody}>
                  <Image style={styles.cardbody_image} source={{uri: product_image}}/>
                   <Text style={styles.p_name}>{data.product_name}</Text>
                   <Text style={styles.p_desc}>{data.product_description}</Text>
                 <View>
                 </View>
                 </View>

                  <TouchableHighlight
                    onPress={() => {
                      this.setModalVisible(!this.state.modalVisible);
                    }}>
                    <Text>Close</Text>
                  </TouchableHighlight>
                </View>

           </Modal>
            <View style={styles.cardheader}>
              <View style={styles.miniheader}>
                <Image style={styles.thumbnail} source={{uri: thumbnail}} />
                <Text style={styles.thumb_name}>{data.farmer_name}</Text>
              </View>
              <Text style={styles.timestamp}>{data.uploaded_time}</Text>
            </View>
            <View style={styles.cardbody}>
              <Image style={styles.cardbody_image} source={{uri: product_image}}/>
             <Text style={styles.p_name}>{data.product_name}</Text>
             <Text style={styles.p_desc}>{data.product_description}</Text>
             <View>
             <TouchableOpacity
                onPress={() => {
                  this.setModalVisible(true);
                }} style={styles.buttonContainer}>
                <Text style={styles.buttonText}>Show Modal</Text>
              </TouchableOpacity>
             </View>
            </View>
          </View>
        )
      });

      return (
        <View style={styles.container}>
            <View elevation={5} style={styles.mainheader}>
               <Text style={styles.iconTop} onPress={() => this.PostTimeline()}>
                  <Ionicons name="md-refresh" size={32} color="black" />
               </Text>
               <Text style={styles.headerTitle}>Home</Text>
               <Text style={styles.iconTop} onPress={() => this.Home()}>
                  <Ionicons name="md-home" size={32} color="black" />
               </Text>
            </View>

            <View style={styles.content}>
               <View style={{padding: 10}}>
                 <Text style={styles.headerText}><Ionicons name="md-cart"  size={26} color="black" /> Marketplace</Text>
               </View>
               <View style={{flex:1}}>
                 <ScrollView alwaysBounceVertical={true} contentContainerStyle={{ flexGrow: 1}} enabled bounces={true}>
                  {timeLineList}
                 </ScrollView>
               </View>
            </View>
        </View>
      );
    }

如果有更好的方法来重构此代码，我可以学习。谢谢

Answer 1

我已经快速更改了您的代码，以使您了解如何在此以下进行检查。

无需循环模式即可在按下按钮时将数据设置为状态，并且模式可以从状态读取数据。

 import React, {Component} from 'react';
import {TextInput,Modal,Alert,TouchableHighlight,StyleSheet,RefreshControl ,ScrollView,Dimensions,Image,StatusBar,ActivityIndicator,Text, View,TouchableOpacity,KeyboardAvoidingView} from 'react-native';
import { createBottomTabNavigator,createStackNavigator,createSwitchNavigator, createAppContainer} from "react-navigation";
let {height, width} = Dimensions.get('window');
import { Ionicons } from '@expo/vector-icons';
import { AsyncStorage } from 'react-native';
export default class Timeline extends Component {
  constructor(props){
    super(props)
    console.log(props)
    this.state = {
      username: '',
      photo: '',
      email: '',
      userId: '',
      address: '',
      timeline: [],
      modalVisible: false,
      refreshing: false,
      selectedData: [],
    }
  }
 setModalVisible(visible) {
   this.setState({modalVisible: visible});
 }
  Home = () => {
    alert("Home");
  }
  PostTimeline = () => {
    return fetch( "http://texotrack.com/api/user/timeline.php", {
      method: "POST",
      headers:{
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        action: 'fetch'
      })
    }).then((response) => response.json()).then((responseJsonFromServer) => {
        this.setState({
          timeline: responseJsonFromServer
        });
    })
  }

componentDidMount(){
    this.PostTimeline();
    AsyncStorage.getItem("key").then((data) =>{
      const val = JSON.parse(data);
      this.setState({
        username: data.name,
        photo: data.photo,
        email: data.email,
        userId: data.id,
        address: data.address
      })
    })
  }

  _selectedItem = (data) => {
    this.setState({selectedData: data});
    this.setModalVisible(true);
  }

  render() {
        const data = this.state.selectedData
        const timeLineList = this.state.timeline.map((data) => {
          console.log(data);
        const thumbnail = data.profile_img;
        const product_image = data.product_image;
        return (
          <View elevation={5} key={data.id} style={styles.card}>
            <View style={styles.cardheader}>
              <View style={styles.miniheader}>
                <Image style={styles.thumbnail} source={{uri: thumbnail}} />
                <Text style={styles.thumb_name}>{data.farmer_name}</Text>
              </View>
              <Text style={styles.timestamp}>{data.uploaded_time}</Text>
            </View>
            <View style={styles.cardbody}>
              <Image style={styles.cardbody_image} source={{uri: product_image}}/>
             <Text style={styles.p_name}>{data.product_name}</Text>
             <Text style={styles.p_desc}>{data.product_description}</Text>
             <View>
             <TouchableOpacity
                onPress={() => {
                  this._selectedItem(data);
                }} style={styles.buttonContainer}>
                <Text style={styles.buttonText}>Show Modal</Text>
              </TouchableOpacity>
             </View>
            </View>
          </View>
        )
      });

      return (
        <View style={styles.container}>
            <View elevation={5} style={styles.mainheader}>
               <Text style={styles.iconTop} onPress={() => this.PostTimeline()}>
                  <Ionicons name="md-refresh" size={32} color="black" />
               </Text>
               <Text style={styles.headerTitle}>Home</Text>
               <Text style={styles.iconTop} onPress={() => this.Home()}>
                  <Ionicons name="md-home" size={32} color="black" />
               </Text>
            </View>

            <View style={styles.content}>
               <View style={{padding: 10}}>
                 <Text style={styles.headerText}><Ionicons name="md-cart" size={26} color="black" /> Marketplace</Text>
               </View>
               <View style={{flex:1}}>
                 <ScrollView alwaysBounceVertical={true} contentContainerStyle={{ flexGrow: 1}} enabled bounces={true}>
                  {timeLineList}
                 </ScrollView>
               </View>
            </View>

            <Modal
                animationType="fade"
                transparent={false}
                visible={this.state.modalVisible}
                key={data.id}
                onRequestClose={() => {
                    alert('Modal has been closed.');
                }}>
                <View style={{margin: 10}}>
                <Text style={styles.headerText}>Product details: {data.product_name}</Text>
                <View style={styles.cardheader}>
                    <View style={styles.miniheader}>
                    <Image style={styles.thumbnail} source={{uri: data.thumbnail}} />
                    <Text style={styles.thumb_name}>{data.farmer_name}</Text>
                    </View>
                    <Text style={styles.timestamp}>{data.uploaded_time}</Text>
                </View>
                <View style={styles.cardbody}>
                    <Image style={styles.cardbody_image} source={{uri: data.product_image}}/>
                    <Text style={styles.p_name}>{data.product_name}</Text>
                    <Text style={styles.p_desc}>{data.product_description}</Text>
                <View>
                </View>
                </View>

                    <TouchableHighlight
                    onPress={() => {
                        this.setModalVisible(!this.state.modalVisible);
                    }}>
                    <Text>Close</Text>
                    </TouchableHighlight>
                </View>
            </Modal>

        </View>
      );
    }

  }