[RN] React Native 使用 React-native-scrollable-tab-view 實現 類頭條 新聞頁頭部 效果

 React Native 使用 React-native-scrollable-tab-view 實現 類頭條 新聞頁效果

 

效果如下：

 

一、安裝依賴

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

 

安裝后對應版本依賴如下：

"dependencies": {
 "react": "16.8.3",
 "react-native": "0.59.5",
 "react-native-scrollable-tab-view": "^0.10.0",
},

 

二、實現代碼

1）顯示View代碼

import React, {Component} from 'react';
import {Text, View} from 'react-native';

import styles from '../../style/NewsStyle';
import ScrollableTabView, {DefaultTabBar, ScrollableTabBar} from 'react-native-scrollable-tab-view';

/**
 * 新聞主頁
 */
class News extends Component {

    render() {
        return (
            <ScrollableTabView
                tabBarPosition='top' //位於屏幕的位置，top頂部  bottom底部  overlayTop頂部，懸浮在內容視圖之上 overlayBottom底部，懸浮在內容視圖之上
                locked={false} //表示手指是否能拖動視圖，默認為false（表示可以拖動）
                scrollWithoutAnimation={true}   //視圖切換是否有動畫
                style={styles.container}
                renderTabBar={() => <ScrollableTabBar />} //ScrollableTabBar支持超過屏幕寬度，Tab左右滾動，而DefaultTabBar不支持
                onChangeTab={(obj) => {
                    console.log('index:' + obj.i);
                }}
                tabBarUnderlineStyle={styles.lineStyle}
                tabBarActiveTextColor='#FF0000'
                >

                <Text style={styles.textStyle} tabLabel='娛樂'>娛樂1</Text>
                <Text style={styles.textStyle} tabLabel='科技'>科技1</Text>
                <Text style={styles.textStyle} tabLabel='軍事'>軍事1</Text>
                <Text style={styles.textStyle} tabLabel='體育'>體育1</Text>
                <Text style={styles.textStyle} tabLabel='娛樂'>娛樂1</Text>
                <Text style={styles.textStyle} tabLabel='科技'>科技1</Text>
                <Text style={styles.textStyle} tabLabel='軍事'>軍事1</Text>
                <Text style={styles.textStyle} tabLabel='體育'>體育1</Text>
                <Text style={styles.textStyle} tabLabel='娛樂'>娛樂1</Text>
                <Text style={styles.textStyle} tabLabel='科技'>科技1</Text>
                <Text style={styles.textStyle} tabLabel='軍事'>軍事1</Text>
                <Text style={styles.textStyle} tabLabel='體育'>體育1</Text>

            </ScrollableTabView>
        );
    }
}

module.exports = News;

 

2）樣式Style文件

NewsStyle.js

/**
 * 新聞主頁樣式
 */
import {StyleSheet} from 'react-native';

export const styles = StyleSheet.create({
    container: { flex: 1,
        marginTop: -4,
    },
    lineStyle: {
        height: 1,
        backgroundColor: '#FF0000',
    },
    textStyle: {
        flex: 1,
        fontSize: 16,
        marginTop: 20,
        textAlign: 'center', },
});

module.exports = styles;

 

 

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/10832079.html

轉載請著名出處！謝謝~~