Как заставить переменную реагировать на родную - PullRequest
Новая
       87

Как заставить переменную реагировать на родную

0 голосов
/ 20 марта 2020

Я использую реагирующую нативную экспозицию для следующего проекта, в основном я хочу получить выбранный элемент из плоского списка и отобразить его в модальном режиме 

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:''

        }}

    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'}
    ]


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


        return(
            <View style={styles.view} >
            <FlatList
                keyExtractor={item => item.id}
                data={meal}
                renderItem={({item})=>(
                    <Card>
                        <TouchableOpacity onPress={(_item)=>{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>
        );}

}

. Этот код я сейчас работаю Я хочу, чтобы внутри моего модального списка отображалось 'food_data' в 'handlePress'. 'food_data' - это выбранный элемент из плоского списка. 

              <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>

Я хочу отобразить его здесь над кнопкой

Ответы [ 2 ]

0 голосов
/ 20 марта 2020

Изменить эти строки кода:

  • Изменить: <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 () вместо medthod: 
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>
)}
0 голосов
/ 20 марта 2020

Сначала объявите ваш handlePress вне метода рендеринга. Другое дело, что this.setState() - это Asyn c, поэтому сначала задайте данные, а затем покажите модальные. Ваш окончательный код должен выглядеть следующим образом: 

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>
    );
  }
}
...