Bonjour,
je souhaite faire une application d'actualité lié a une API. J'ai un petit problème car je veux que lorsque mon onPress de mon text est cliqué alors mon modal s'ouvre avec la bonne information tiré de mon api. Mais à l'inverse lorsque je click sur mon Text ça m'affiche toujours le premier résultat de l'API. J'ai cherché si je pouvais quelque chose avec l'id sauf qu'il n'y a pas d'id. Dernièrement, je me demandais si on ne pouvais pas faire une recherche dans l'Api du type "Lorsque mon text est cliqué alors on recherche dans l'api le titre correspondant et on affiche la description qui convient". Apres de nombreuses recherche sur internet je n'ai rient trouvé a ce sujet
Voici mon code
import * as React from 'react'; import { View, Text, ActivityIndicator, StyleSheet, ScrollView, TouchableOpacity, Linking, Image, Modal } from 'react-native'; class App extends React.Component{ state = { post: {}, modalVisible: false, } setModalVisible(visible) { this.setState({modalVisible: visible}); } componentDidMount() { return fetch('mon url d'API') .then((response) => response.json() ) .then((responseJson) =>{ this.setState({ isLoading: true, items: responseJson.articles, }) }) } render() { var {isLoading, items} = this.state; if(!isLoading){ return <ActivityIndicator/>; } else { return( <View style={styles.app}> <View style={styles.header}> <Text style={styles.title}> Google News </Text> </View> <ScrollView> {items.map(item =>( <View> <View style={styles.bar}> <TouchableOpacity title="click" style={styles.back}> <Image style={ styles.image } resizeMode="contain" source={{uri: item.urlToImage != null ? item.urlToImage : 'https://zupimages.net/viewer.php?id=20/10/60pu.jpg' }} /> <Text style={styles.article} onPress={() => {this.setModalVisible(true)}}> {item.title} </Text> </TouchableOpacity> </View> <Modal animationType="slide" visible={this.state.modalVisible} style={styles.modal} transparent={true}> <View style={styles.content}> <ScrollView> <Text style={styles.modalarticle}> {item.content} </Text> <View style={styles.footer}> <TouchableOpacity style={styles.viewmore}> <Text onPress={() => Linking.openURL(item.url)} style={styles.viewmoretext}> View more </Text> </TouchableOpacity> <TouchableOpacity onPress={() => {this.setModalVisible(!this.state.modalVisible)}} style={styles.goback}> <Text style={styles.gobacktext}> Go Back </Text> </TouchableOpacity> </View> </ScrollView> </View> </Modal> </View> ))} </ScrollView> </View> ) } } } const styles = StyleSheet.create({ article: { fontWeight: "bold", textAlign: "justify", marginLeft: 20, marginRight: 20, marginBottom: 10 }, bar: { borderBottomColor: "black", borderBottomWidth: 1, flex: 1, flexDirection: 'row', }, header: { paddingBottom: 25, backgroundColor: '#24b35a', shadowColor: '#000000', shadowOffset: { width: 0, height: 5 }, shadowOpacity: 0.6, borderBottomLeftRadius: 10, borderBottomRightRadius: 10, }, title: { textAlign:'center', marginTop: 30, paddingTop:10, fontWeight: "bold", fontSize: 20, }, image: { width: 200, height: 200, borderRadius: 30, marginLeft: 100, }, viewmore: { backgroundColor: '#24b35a', borderRadius: 35, width: 130, height: 35, marginTop: 10, marginLeft: 20 }, viewmoretext: { fontSize: 20, textAlign: "center", marginTop: 3, }, modalarticle: { textAlign: "justify", marginTop: 40, marginLeft: 20, marginRight: 20, fontSize: 20, }, goback: { backgroundColor: 'steelblue', borderRadius: 35, width: 130, height: 35, marginTop: 10, marginLeft: 100, }, gobacktext: { fontSize: 20, textAlign: "center", marginTop: 3, }, footer: { borderTopColor: "black", borderTopWidth: 1, flex: 1, flexDirection: 'row', marginTop: 30 }, content: { backgroundColor:'#ffffff', marginLeft: 5, marginRight: 5, marginTop: 570, borderTopLeftRadius: 20, borderTopRightRadius: 20, flex: 1, shadowColor: '#000000', shadowOffset: { width: 5, height: 5 }, shadowOpacity: 1.0 } }); export default App
Afficher la suite