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

对此问题的建议修复here，是从style组件中移除Swiper道具。

要获得所需的边框，您可以将滑块包裹在父视图中。希望这会有所帮助。