Question

我是反应原生的新手，我正在尝试制作一个浏览3个WebViews的组件（使用react-native-swiper，swiper包含3个WebView），每个组件都有动画。代码是这样的 -

<Swiper autoplay={true} loop={false} >                
    <View style={this.styles.slide1}>
        <WebView source = {require(‘./Page1.html')} />
    </View>
    <View style={this.styles.slide2}>
        <WebView source = {require(‘./Page2.html')}/>
    </View>
    <View style={this.styles.slide3}>
        <WebView source = {require(‘./Page3.html’)}/>
    </View>
</Swiper>

第一个WebView工作正常，但是当显示后续WebView时，他们的动画已经完成，因为他们已经完成加载，同时仍然显示第一个WebView。有没有办法延迟加载URL，直到Swiper准备好在屏幕上显示它？

Answer 1

例如：

constructor(props){
    super(props);
    this.state = {
      shouldShowWebView: false
    };
  }

componentDidMount(){
this.setState({shouldShowWebView: true})
}

render(){
return(
<View>{this.state.shouldShowWebView ? <WebView /> : <View />}</View>
);
}

将shouldShowWebView的初始值设置为false。无论何时您想要显示它，请将值设置为true。例如在componentDidMount中。并在渲染中检查它的值是否为true。（条件渲染）希望这会有所帮助。

如何在呈现视图后开始加载WebView？

1 个答案: