Question

我正在使用this包在React Native中创建一个<%@ WebService Language="VB" CodeBehind="Service1.asmx.vb" Class="myApp.Service1" %>。我使用了静态数据，并且可以正常工作，但是现在我正在从服务器获取数据，并将其保存为Swiper状态。问题是当在swiper中映射数据以创建动态滑块时，它什么都没有显示，但是如果我在swiper之外执行，则会呈现。

我该如何解决这个问题？

Array

Answer 1

从该模块的文档中：

动态内容 如果幻灯片的状态或道具已更改，则不会重新渲染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;

我在评论中提到了如何从通知对象中获取所需的信息。现在是发送部分，在您的map函数中，只需调用新创建的Slide组件，并将通知对象作为prop传递如下：

<Slide notification={notif}/>

请注意，notification={notif}中的通知将用作Slide组件中prop的名称，并且您必须如前所述从this.props.notification对象中提取信息。

如何根据状态更改重新渲染React Native Web Swiper？

1 个答案: