Блог

я пытаюсь напечатать времена из нижеприведенного api, но api является вложенным.

Данные Api следующие: { «code»: 200, «status»: «OK», «results»: { «datetime»: [ { «times»: { «Imsak»: «03:57», «Sunrise»: «05:31», «Fajr»: «04:07», «Dhuhr»: «12:10», «Asr»: «15:50», «Sunset»: «18:49», «Maghrib» : «19:00», «Иша»: «20:13», «Полночь»: «23:28″ }, » дата»: { «временная метка»: 1598140800, «григорианский»: «2020-08-23», «хиджры»: «1442-01-04″ } } ], » местоположение»: { «широта»: 33.729389190673828, «долгота»: 73.093147277832031, «высота»: 585.0, «город»: «Исламабад», «страна»: «Пакистан», «код страны»: «PK», «часовой пояс»: «Азия / Карачи», «local_offset»: 5.0 }, «настройки»: { «формат времени»: «ЧЧ: мм», «школа»: «Итна Ашари», «юриспруденция»: «Шафии», «хайлат»: «Нет», «fajr_angle»: 18.0, «isha_angle»: 18.0 } } }

Я хочу отобразить все времена молитв, используя ToucableOpacity в React-native

Класс выборки — это:

 import React, { Component } from 'react'
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native'

class tryo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            timings: {}
        }
    }

    componentDidMount = () => {
        fetch("https://api.pray.zone/v2/times/today.json?city=islamabad", {
            "method": "GET",

        })
            .then((response) => response.json())
            .then((responseJson) => {
                console.log("Mount",responseJson);
                this.setState({
                    timings: responseJson.results
                })
                console.log("state check",this.state.timings)
            })
            .catch((error) => {
                console.error(error);
            });
    }


    render() {






   const data=this.state.timings
        console.log("lets check data",this.state.timings)
        return (
// <View>
//  <Text>dsd</Text>
// </View>

            <View style={styles.container}>

                {Object.entries(data).map((item,index)=>(
                    <TouchableOpacity key={index} style={styles.touch_sense} onPress={() => this.props.navigation.navigate('Home')}  >

                        <Text style={styles.item_Text} >

                            {item['times']}

                        </Text>

                    </TouchableOpacity>

                )   )
                }

             </View>

        );}
}
export default tryo

const styles=StyleSheet.create({

        item_Text:{
            fontWeight:'bold',
            fontSize: 20,


        },
        container:{

            // textAlign:'center',
            // alignItems:'center',
            // justifyContent:'center',
            // marginTop:15,
            padding:5,
            // backgroundColor:'green'

        }
        ,
        touch_sense:{
            textAlign: 'center',
            justifyContent:'center',
            alignItems:'center',
            marginTop:10,
            backgroundColor:'#1FE884',
            width:400,
            height:80


        }



    }

);
  

я хочу получить доступ к атрибутам времени из API

Я бы создал дополнительный метод визуализации, подобный этому:

 renderTimes(times) {
    return times.map( (time) => {
        <Text style={styles.item_Text}>
            {time}
        </Text>
    });
}
  

а затем обновите свой метод визуализации, чтобы быть:

 render() {
    return ( 
        <View style={styles.container}>
            { Object.entries(data).map((item,index)=>(
                <TouchableOpacity key={index} style={styles.touch_sense} onPress={() => this.props.navigation.navigate('Home')}  >
                    {renderTimes(item['times'])}
                </TouchableOpacity>
             )}
         </View>
    );
}
  

Если вы хотите, чтобы каждый момент времени был своим TouchableOpacity , просто преобразуйте эти строки кода в этот renderTimes метод.