reagieren-native-swiper Taste nicht richtig funktioniert

Question

Ausgabe

Die blaue aktive Button wird nicht aktualisiert, wenn die react-native-swiper bewegt, wie unten gezeigt.

Für swiper ich erstellen eine Ansicht mit der map() Funktion.

Beachten Sie, dass das Übergeben des Schlüssels (Index) an die untergeordnete Ansichtskomponente die blaue Schaltfläche nicht aktualisiert.

Wenn ich die Ansicht fest codiere, ohne die Funktion map() im Swiper zu verwenden, funktioniert die Schaltfläche.

Was ist das Problem?

Referenzen Foto

My-Code

import React from 'react'; 
import { View, Platfrom, Text, StyleSheet, AsyncStorage, TouchableOpacity, Image, FlatList, ScrollView } from 'react-native'; 
import Icon from 'react-native-vector-icons/FontAwesome'; 
import { connect } from 'react-redux'; 
import moment from 'moment'; 
import Swiper from 'react-native-swiper'; 

import * as settings from '../../config/settings'; 


const styles = StyleSheet.create({ 
    headerRight: { 
     padding: 10 
    }, 
    body_txt: { 
     marginTop: 5, 
     padding: 8, 
     borderWidth: 1, 
     borderColor: '#EAEAEA', 
    }, 
    slidmain: { 
     borderColor: '#EAEAEA', 
     borderWidth: 1, 
    }, 
    slide1: { 
     width: '100%', 
     height: 300, 
    }, 
    main: { 
     flex: 1, 
     backgroundColor: '#FFFFFF', 
     padding: 10, 
    }, 
    image: { 
     height: 100, 
     width: '98%', 
     marginBottom: 70, 
     marginLeft: '1%', 
     resizeMode: 'contain', 
    } 
}); 


class RepairInquiryDetailScreen extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      created_date: '', 
      photos: [], 
      key: 0, 
     } 
    } 

    static navigationOptions = ({ navigation }) => ({ 
     title: '수선 문의서', 

     headerStyle: { 
      backgroundColor: '#fff', 
      borderBottomWidth: 0, 
      elevation: 0, 
     }, 
     headerTitleStyle: { 
      color: '#000', 
      fontSize: 20, 
      textAlign: 'center', 
      alignSelf: 'center', 
     }, 
     headerRight: <Icon name="bars" size={30} color="#333" onPress={() => navigation.navigate('DrawerOpen')} style={styles.headerRight} /> 
    }) 

    RepairInquiryDetailService = async() => { 
     let user_info = await AsyncStorage.getItem('user_info'); 
     user_token = JSON.parse(user_info).key; 
     let inquiry_id = this.props.navigation.state.params.id 
     const api_uri = settings.base_uri + 'inquiry/' + inquiry_id + '/' 

     fetch(api_uri, { 
      method: 'GET', 
      headers: { 
       'Authorization': 'Token ' + user_token, 
      } 
     }) 
      .then(res => res.json()) 
      .then(res => { 

       let repair_type_tmp = "" 
       for (i = 0; i < res.repair_type.length; i++) { 
        if (i == 0) { 
         repair_type_tmp += res.repair_type[i].type; 
        } else { 
         repair_type_tmp += ", " + res.repair_type[i].type; 
        } 
       } 

       let photos_tmp = []; 
       for (i = 0; i < res.photos.length; i++) { 
        photos_tmp[i] = res.photos[i].thumbnail; 
       } 

       let logistics_tmp = ""; 
       if (res.logistics == "delivery") { 
        logistics_tmp = "택배"; 
       } else if (res.logistics == "quick") { 
        logistics_tmp = "퀵"; 
       } else if (res.logistics == "direct") { 
        logistics_tmp = "방문"; 
       } else { 
        logistics_tmp = res.logistics; 
       } 

       this.setState({ 
        product_type: res.product_type.type, 
        repair_type: repair_type_tmp, 
        model: res.model, 
        content: res.content, 
        logistics: logistics_tmp, 
        created_date: res.created_date, 
        direct_partner: res.direct_partner, 
        photos: photos_tmp, 
       }) 

       console.log(this.state.photos) 
      }) 


      .catch((error) => { 
       console.error(error); 
      }); 
    } 

    componentDidMount() { 
     this.RepairInquiryDetailService(); 
    } 

    render() { 
     const parsedDate = moment(this.state.created_date).format("YYYY.MM.DD") 

     return (
      <ScrollView style={styles.main}> 
       <Swiper 
        style={styles.slidmain} 
        height={300} 
        showsButtons={false} 
        loop={false} 
        > 
        {this.state.photos.map((item, key) => { 
         console.log(item, key); 
         return (
          <Slide uri={item} key={key} i={key}/> 
         ); 
        })} 
       </Swiper> 
       <View style={styles.body_txt}> 
        <Text>제품 카테고리: {this.state.product_type}</Text> 
        <Text>수선 카테고리: {this.state.repair_type}</Text> 
        <Text>모델명: {this.state.model}</Text> 
        <Text>배송유형: {this.state.logistics}</Text> 
        <Text>작성일: {parsedDate}</Text> 
        <Text>문의 상세내용: {this.state.content}</Text> 
       </View> 
      </ScrollView> 
     ) 
    } 
} 

const Slide = props => { 
    console.log('uri and key: ', props.uri, props.i); 
    return (
     <View style={styles.slide1} key={props.i}> 
      <Image 
       source={{ uri: props.uri }} 
       style={styles.slide1} 
      /> 
     </View> 
    ); 
} 


const mapStateToProps = state => ({ 
    isLoggedIn: state.loginReducer.isLoggedIn 
}) 

const RepairInquiryDetail = connect(mapStateToProps, null)(RepairInquiryDetailScreen); 

export default RepairInquiryDetail; 

Dank!

Answer 1

Eine vorgeschlagene Lösung für dieses Problem, gefunden here, ist das Entfernen der style Prop von Ihrer Swiper Komponente.

Um Ihren gewünschten Rahmen zu erhalten, können Sie Ihren Swiper in eine Elternansicht einbinden. Hoffe das hilft.