Как повторно обработать React Native Web Swiper на основе изменения состояния? - PullRequest
Новая
       22

Как повторно обработать React Native Web Swiper на основе изменения состояния?

0 голосов
/ 23 марта 2020

Я использую этот пакет для создания Swiper в React Native. Я использовал данные stati c, и он работает, но теперь я получаю данные с сервера и сохраняю их в состоянии как Array. Проблема заключается в том, что при отображении данных внутри swiper для создания динамических c слайдеров они ничего не показывают, но если я делаю это вне Swiper, то рендеринг.

Как я могу решить эту проблему? 

 <Swiper
    from={0}
    minDistanceForAction={0.1}
    controlsProps={{
        dotsTouchable: true,
        prevPos: 'left',
        nextPos: 'right',
        nextTitle: '',
        prevTitle: '',
        dotsWrapperStyle: { marginTop: ScaleHelpers.CalcHeight(8), width: ScaleHelpers.CalcWidth(7), height: ScaleHelpers.CalcHeight(7), borderRadius: ScaleHelpers.CalcWidth(7) },
                                dotActiveStyle: { width: ScaleHelpers.CalcWidth(7), height: ScaleHelpers.CalcHeight(7), borderRadius: ScaleHelpers.CalcWidth(7) },
                            }}
 >

 {
   this.state.notifications.map((notif, index) => {
      return (
          <View style={[styless.slideContainer]}>

                                            <Card transparent style={{
                                                flex: 0,
                                                elevation: 3,
                                                shadowColor: "#000",
                                                shadowOpacity: 0.1,
                                                shadowOffset: { width: 0, height: 2 },
                                                shadowRadius: 1.0,

                                            }}>
                                                <CardItem
                                                    style={{ paddingTop: ScaleHelpers.CalcHeight(14), paddingLeft: ScaleHelpers.CalcWidth(14), paddingBottom: ScaleHelpers.CalcHeight(14) }}
                                                >
                                                    <Left>
                                                        <View style={{
                                                            width: ScaleHelpers.CalcWidth(60),
                                                            height: ScaleHelpers.CalcHeight(60),
                                                            borderRadius: ScaleHelpers.CalcWidth(60) / 2,
                                                            margin: 0,
                                                            padding: 0,
                                                            justifyContent: 'center',
                                                            backgroundColor: '#FF004E',
                                                            elevation: 5,
                                                            shadowColor: "#000",
                                                            shadowOpacity: 0.1,
                                                            shadowOffset: { width: 0, height: ScaleHelpers.CalcHeight(2) },
                                                            shadowRadius: 1.0,
                                                        }}>
                                                            <Image source={bmwerror} style={{ alignSelf: 'center' }} />
                                                        </View>
                                                        <Body style={{ marginLeft: ScaleHelpers.CalcWidth(23) }}>
                                                            <Text style={styles.cardUpperText}>{notif.msg}</Text>
                                                            <Text style={styles.cardLowerText}>{notif.axle}{notif.side}</Text>
                                                        </Body>
                                                    </Left>
                                                </CardItem>
                                            </Card>

                                        </View>
      )
   })

 }
</Swiper>

1 Ответ

1 голос
/ 23 марта 2020

Из документации модуля:

Dynami c content Swiper не будет перерисован, если состояние слайдов или реквизит изменились. Слайды должны контролировать их состояние.

Это означает, что вы должны сами управлять изменением состояния через слайды, а не через компонент Swiper.

РЕДАКТИРОВАТЬ:

Таким образом, вы можете создать собственный модуль Slide для обработки этих слайдов, поступающих с сервера: 

class Slide extends React.Component {
constructor(props) {
    super(props);
    // your state for the slide component goes here....
}
render() {
    const { msg, axle, side } = this.props.notification; // destructure your notification prop being passed from the map method of parent component
    return (
        <View style={[styless.slideContainer]}>
            <Card transparent style={{
                flex: 0,
                elevation: 3,
                shadowColor: "#000",
                shadowOpacity: 0.1,
                shadowOffset: { width: 0, height: 2 },
                shadowRadius: 1.0,

            }}>
                <CardItem
                    style={{ paddingTop: ScaleHelpers.CalcHeight(14), paddingLeft: ScaleHelpers.CalcWidth(14), paddingBottom: ScaleHelpers.CalcHeight(14) }}
                >
                    <Left>
                        <View style={{
                            width: ScaleHelpers.CalcWidth(60),
                            height: ScaleHelpers.CalcHeight(60),
                            borderRadius: ScaleHelpers.CalcWidth(60) / 2,
                            margin: 0,
                            padding: 0,
                            justifyContent: 'center',
                            backgroundColor: '#FF004E',
                            elevation: 5,
                            shadowColor: "#000",
                            shadowOpacity: 0.1,
                            shadowOffset: { width: 0, height: ScaleHelpers.CalcHeight(2) },
                            shadowRadius: 1.0,
                        }}>
                            <Image source={bmwerror} style={{ alignSelf: 'center' }} />
                        </View>
                        <Body style={{ marginLeft: ScaleHelpers.CalcWidth(23) }}>
                            {/* use your destructure constants where required */}
                            <Text style={styles.cardUpperText}>{msg}</Text> 
                            <Text style={styles.cardLowerText}>{axle}{side}</Text>
                        </Body>
                    </Left>
                </CardItem>
            </Card>

        </View>
    );
}
}export default Slide;

Я упоминал в комментариях, как вы можете извлечь необходимую информацию из объекта уведомлений. Теперь идет отправляющая часть, в вашей функции карты просто вызовите только что созданный компонент Slide и передайте объект уведомления как опору: 

<Slide notification={notif}/>

Обратите внимание, здесь, в notification={notif} уведомление будет служить именем реквизита в компоненте Slide и там вы должны извлечь информацию из объекта this.props.notification, как упоминалось ранее.

...