如何获得原生的变量反应

问题描述 投票:0回答:2

谢谢1:确保您已登录Stack OverFlow上的帐户。2:查看您要删除的问题。3:在问题帖子页上的标签下,找到“删除”按钮。点击“删除”4:通过单击“删除问​​题”,对删除确认消息进行确认

android react-native react-native-android react-native-flatlist openjfx
2个回答
0
投票

首先在渲染方法之外声明您的handlePress。另一件事是this.setState()是异步的,因此,首先设置数据,然后显示模态。您的最终代码应如下所示:

import React, { Component } from 'react';
import { View, Text, Image, StyleSheet, Modal, Button } from 'react-native';
import { FlatList, TouchableOpacity, ScrollView } from 'react-native-gesture-handler';
import Card from '../shared/card';
import { AppLoading } from 'expo';
import * as Font from 'expo-font';

export default class MealSearch extends Component {
  constructor(props) {
    super(props)

    this.state = {
      loaded: false,
      show: false,
      key: ''
    }
  }

  handlePress = (meal_data) => {
    this.setState({ selectedMeal: meal_data }, () => {
      this.setState({ show: true });
    });
    console.log(meal_data)
  }

  render() {
    const meal = [
      { title: 'My hero Academia', img: { uri: 'https://i.cdn.turner.com/adultswim/big/img/2018/05/10/MHA_Header.png' }, body: 'Rating : 4.5/5', id: '1' },
      { title: 'Naruto', img: { uri: 'https://store-images.s-microsoft.com/image/apps.15041.71343510227343465.377174a9-abc8-4da3-aaa6-8874fdb9e2f5.00fc0a9e-295e-40ca-a391-58ed9f83e9a0?mode=scale&q=90&h=1080&w=1920&background=%23FFFFFF' }, body: 'Rating : 5/5', id: '2' },
      { title: 'Attack On Titan', img: { uri: 'https://www.denofgeek.com/wp-content/uploads/2013/12/attack-on-titan-main.jpg?fit=640%2C380' }, body: 'Rating : 4.5/5', id: '3' },
      { title: 'Fate: Unlimited Blade Works', img: { uri: 'https://derf9v1xhwwx1.cloudfront.net/image/upload/c_fill,q_60,h_750,w_1920/oth/FunimationStoreFront/2066564/Japanese/2066564_Japanese_ShowDetailHeaderDesktop_496a6d81-27db-e911-82a8-dd291e252010.jpg' }, body: 'Rating : 4.5/5', id: '4' }
    ]

    return (
      <View style={styles.view} >
        <FlatList
          keyExtractor={item => item.id}
          data={meal}
          renderItem={({ item }) => (
            <Card>
              <TouchableOpacity onPress={() => { this.handlePress(item) }}>
                <View style={styles.mealItem}>
                  <Image style={{ width: 300, height: 150 }} resizeMode={'contain'} source={item.img} marginLeft={30} />
                  <View style={styles.descrip}>
                    <Text style={styles.rating}>{item.title}</Text>
                    <Text style={styles.name}>{item.body}</Text>
                  </View>
                </View>
              </TouchableOpacity>
            </Card>


          )}
        />

        <Modal
          transparent={true}
          visible={this.state.show}
        >
          <View style={styles.modal}>
            <View style={styles.inModal}>


              <Button title='End' onPress={() => { this.setState({ show: false }) }} />
            </View>
          </View>

        </Modal>
      </View>
    );
  }
}


0
投票

更改这些代码行:

  • 更改:<TouchableOpacity onPress={(_item)=>{handlePress(item)}}><TouchableOpacity onPress={() => this.handlePress(item)}>

  • 在render()中删除此代码:

const handlePress = (meal_data) =>{
  this.setState({show: true});
  this.setState({selectedMeal:meal_data});
  console.log(meal_data)
}
  • 并将此代码放在render()方法之上:
handlePress = (meal_data) =>{
  this.setState({show: true, selectedMeal: meal_data});
  console.log(meal_data)
}
  • 内部状态
this.state = {
  loaded:false,
  show:false,
  key:''
  selectedMeal: null // Add this property
}}

之后,您将可以在模态中访问selectedMeal。>

  • 将此代码放入模态(或其他地方)
{this.state.selectedMeal && (
  <View>
    <Text>{this.state.selectedMeal.title}</Text>
  </View>
)}
© www.soinside.com 2019 - 2024. All rights reserved.