[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

转载请著名出处！谢谢~~