React Native实现类似原生Android中ViewPage+TabLayout

实现思路:Tab部分采用ScrollableTabView+ScrollableTabBar,切换的页面可以封装成一个可以复用的。

效果图:
React Native实现类似原生Android中ViewPage+TabLayout_第1张图片

代码如下:
首先安装第三方库

npm install react-native-scrollable-tab-view --save

ScrollableTabView部分代码:


                        
                    }
                >
                /******         renderFragment是复用的页面   tempTabData为Tab标题数组 根据数据灵活增加       ******/
                {tempTabData.map(this.renderFragment)}

renderFragment代码:

renderFragment = (item, i) => {
        return(
            
        )
    };

上面代码用到的样式:

const styles = StyleSheet.create({
	//Tab样式
	scrollTab: {
        flex: 1,
        backgroundColor: '#fff',
    },
    //Tab下划线样式
    underlineStyle:{
        height:2,
        justifyContent:'center',
        alignItems: 'center',
        backgroundColor:'#fcb602',
    }
});

你可能感兴趣的