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;