首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
maomaomao001
V2EX  ›  问与答

[react native] 请问使用 react native scrollable-tab-view 组件时,如何预加载内容?

  •  
  •   maomaomao001 · 2016-10-14 18:02:57 +08:00 · 5346 次点击
    这是一个创建于 1200 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如 scrollable-tab-view 里有三个 tab 每个的内容是 webview , 怎么才能让他们全都一起开始加载呢?? 现在是只有跳转到某个 tab, 它里面的 webview 才开始加载

    代码

    
    import React, { Component } from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        TouchableHighlight,
        View,Navigator,TouchableOpacity,WebView
    } from 'react-native';
    
    import ScrollableTabView, {DefaultTabBar, } from 'react-native-scrollable-tab-view';
    
    
    
    export class App extends Component {
        constructor(props) {
            super(props);
            this.state = {
                url: 'http://www.bing.com'
            };
        }
    
    
        changeTab(tabName,el) {
    
        }
    
    
        renderContent(url) {
            return (
    
                    <WebView
                        style={{ flex: 1 } }
                        ref = "AAA"
                        automaticallyAdjustContentInsets={ false }
                        source={ { uri: url } }
                        javaScriptEnabled={ true }
                        domStorageEnabled={ true }
                        scrollEnabled={ true }
                        decelerationRate="normal"
                        startInLoadingState={ true } />
            );
    
        }
    
    
        render() {
            return (
                <ScrollableTabView
    
                    ref="tabView"
    
                    style={ { marginTop: 20 } }
                    onChangeTab={ this.changeTab }
                    renderTabBar={ () => <DefaultTabBar /> }
                    scrollWithoutAnimation={ true }>
                    <View
                        ref ="el1"
                        style={ styles.android }
                        tabLabel='page1'>
                        { this.renderContent('http://v2ex.com') }
                    </View>
                    <View
                        ref ="el2"
                        style={ styles.android }
                        tabLabel='page2'>
                        { this.renderContent('http://www.baidu.com') }
                    </View>
                    <View
                        style={ styles.android }
                        ref ="el3"
                        tabLabel='page3'>
                        { this.renderContent('http://global.bing.com/?FORM=HPCNEN&setmkt=en-us&setlang=en-us') }
                    </View>
                </ScrollableTabView>
    
    
            );
        }
    
        componentDidMount(){
            this.refs.tabView.goToPage(1);
            this.refs.tabView.goToPage(2);
            this.refs.tabView.goToPage(0);
            // this.refs.tabView.goToPage(0);
            console.log(this);
        }
    
    
    }
    
    const styles = StyleSheet.create({
        android: {
            flex: 1
        }
    });
    
    
    
    第 1 条附言  ·  2016-10-15 23:35:53 +08:00
    来个人啊~~万能的 V2ex
    1 回复  |  直到 2016-10-14 18:03:33 +08:00
    maomaomao001
        1
    maomaomao001   2016-10-14 18:03:33 +08:00
    @Kokororin 请帮帮我
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2268 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 22ms · UTC 12:16 · PVG 20:16 · LAX 04:16 · JFK 07:16
    ♥ Do have faith in what you're doing.