时间戳

首页 > 解决方案 > 如何根据状态变化重新渲染 React Native Web Swiper？

react-native - 如何根据状态变化重新渲染 React Native Web Swiper？

问题描述

我正在使用这个Swiper包在 React Native中创建一个。我使用了静态数据并且它正在工作，但现在我正在从服务器获取数据并将其保存为Array. 问题是在将数据映射到 swiper 内以创建动态滑块时，它没有显示任何内容，但如果我在 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>

标签： react-nativeswiper

解决方案

从模块的文档中：

动态内容 如果幻灯片状态或道具发生变化，Swiper 将不会重新渲染。载玻片必须控制其状况。

这意味着您必须通过幻灯片而不是通过 Swiper 组件自行管理状态更改。

编辑：

因此，您可以创建一个自定义幻灯片模块来处理来自服务器的幻灯片：

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}/>

请注意，in notification={notif}notification 将作为 Slide 组件中道具的名称，您必须在此处从this.props.notification对象中提取信息，如前所述。

推荐阅读