반응 - 기본 - swiper의 버튼이 작동하지 않습니다 제대로

Question

문제

아래의 파란색 활성화 버튼이 react-native-swiper 이동 아래와 같이 할 때 업데이트되지 않습니다.

swiper의 경우 map() 기능을 사용하여보기를 만들고 있습니다.

하위보기 구성 요소에 키 (색인)를 전달해도 파란색 단추가 업데이트되지 않습니다.

swiper에서 map() 기능을 사용하지 않고보기를 하드 코딩하면 단추가 작동합니다.

무엇이 문제입니까?

참고 사진

내 코드

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; 

감사합니다!

Answer 1

Swiper 구성 요소의 style 받침을 제거하려면이 문제의 권장 수정본 인 here이 필요합니다.

원하는 테두리를 얻으려면 부모보기에서 포장기를 감쌀 수 있습니다. 희망이 도움이됩니다.