react-native學習筆記——ViewStack組件

今天來寫一個組件，相信很多人都會用到的——ViewStack。

ViewStack組件無疑是UI中很重要的一個組件，可惜react-native並沒有內嵌進去，需要開發者自己去實現。

實現原理很簡單，就是根據索引來顯示一個子視圖，用一個render即可完成：

render(){
    return(
        <View>
            {this.props.children[this.props.index]}
        </View>
    );
}

這樣，一個最簡單的ViewStack就完成了，那怎么使用呢：

<ViewStack index={this.state.tabIndex}>
    <PageSNS/>
    <PageGroup/>
    <PageLibrary/>
    <PageChat/>
    <PageProfile/>
</ViewStack>

通過修改state的tabIndex來切換子視圖即可。

是不是挺簡單呢！但是，你用着用着就會發現，這有點問題，當你來回切換視圖的時候，會發現，子視圖的狀態每次都重置了，比如在PageSNS視圖上，你滾動列表到了下面，然后切換到了其他子視圖，再切換回來，會發現列表又從回到頂部了。

那么問題來了，有些開發者就想要這樣的體驗，那沒事。而有些需求確是必須要保留狀態，那怎么整呢？

為什么子視圖會被重置呢？那就要涉及到react的渲染機制了，它會再render的時候遍歷一次所有子節點，把要卸載的都卸載掉，要裝載的給裝載上去，那就一目了然了。我們的簡單版ViewStack僅僅是每次渲染一個子視圖，而其他的時候會被卸載掉，當要重新渲染那個視圖的時候，那個視圖其實已經不在了，在只是新new出來（或者從對象池里拿出來並初始化后）的那個視圖了，所以這就是問題的所在了。

那么怎么保留子視圖的狀態呢？（這個狀態並不是react的state機制，而說得是整個視圖的邏輯狀態，好吧，我也扯不清楚了）

我做了一些測試，發現只要組件被卸載了，那么這個組件就不可能恢復了，或者說恢復代價有點高。當然，方法是有的，而且很簡單，只是這種方法比較魯莽，聽我道來。

在使用Navigator組件的時候，會發現，他的子視圖怎么能保留狀態呢，這個很神奇，難道他把什么引用存起來了？然后我深入Navigator的源碼看了下去，發現他坑爹把全部子視圖都render了，把要顯示的視圖給顯示，而不需要顯示的則移到了屏幕外面，就這么簡單啦，我也懵了，原來就是這種方法，相信你也會說一句靠之類的感嘆詞吧，但是它的確就是這么做的，所以我說這種方法有些魯莽。

然后我就寫下了2.0版的ViewStack：

/**
 * Created by rockyl on 15/11/08.
 */
var React = require('react-native');
var {
    StyleSheet,
    Component,
    View,
    } = React;
var Dimensions = require('Dimensions');
var SCREEN_WIDTH = Dimensions.get('window').width;
var SCREEN_HEIGHT = Dimensions.get('window').height;

class ViewStack extends Component {
    constructor(props) {
        super(props);
    }

    static get defaultProps(){
        return {
            index: 0,
        }
    };

    render(){
        this.views = this.props.children.map((page, i)=>{
            var style = this.props.index == i ? [styles.viewBase] : [styles.viewBase, styles.viewDisabled];
            return (
                <View
                    key={'view_' + i}
                    style={style}>
                    {page}
                </View>
            );
        });
        return (
            <View style={[styles.container, this.props.style,]}>
                {this.views}
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        overflow: 'hidden',
    },
    viewBase: {
        position: 'absolute',
        overflow: 'hidden',
        left: 0,
        right: 0,
        bottom: 0,
        top: 0,
    },
    viewDisabled: {
        top: SCREEN_HEIGHT,
        bottom: -SCREEN_HEIGHT,
    },
});

module.exports = ViewStack;

so easy!

用法和簡單版是一樣的。

再然后，你用着用着就會發現，這切換的時候好生硬啊，秒切，略缺少點什么用戶體驗，比如說滾動之類的動畫也要啊。

2.1版將攜帶動畫參數和其他高級功能參數，那就要等這篇博文更新啦！