React-Native中react-native-tab-view的使用

最新推荐文章于 2024-09-14 07:10:19 发布

Anita-Sun

最新推荐文章于 2024-09-14 07:10:19 发布

阅读量3.9k

点赞数

分类专栏： React Native

本文链接：https://blog.csdn.net/AnitaSun/article/details/115391271

版权

React Native 专栏收录该内容

45 篇文章

订阅专栏

本文详细介绍了如何在React Native应用中使用`react-native-tab-view`组件创建一个带有懒加载和个性化选项的Tab切换界面，包括设置样式、路由管理及事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-native-tab-view

安装：

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

使用：

import * as React from 'react';
import {
  Animated,
  View,
  Text,
  TouchableOpacity,
  Dimensions,
  StyleSheet,
} from 'react-native';
import {TabView, SceneMap, TabBar} from 'react-native-tab-view';
import Constants from 'expo-constants';
import PropTypes from 'prop-types';

const FirstRoute = () => (
  <View style={[styles.container, {backgroundColor: '#ff4081'}]} />
);

const SecondRoute = () => (
  <View style={[styles.container, {backgroundColor: '#673ab7'}]} />
);

// 懒加载，当数据还没有出现的时候应该显示的东西
const LazyPlaceholder = ({route}) => (
  <View style={styles.scene}>
    <Text>Loading {route.title}…</Text>
  </View>
);

export default class TabViewExample extends React.Component {
  static propTypes = {
    itemWidth: PropTypes.number.isRequired,
  };

  state = {
    index: 0,
    routes: [
      {key: 'first', title: 'First'},
      {key: 'second', title: 'Second'},
    ],
  };

  // 这个加进去就行，不用问为啥
  _handleIndexChange = index => this.setState({index});

  renderRankListEmitter = route => {
    if (route.key === '日榜') {
    } else if (route.key === '周榜') {
    } else if (route.key === '月榜') {
    }
  };

  _renderTabBar = props => {
    const inputRange = props.navigationState.routes.map((x, i) => i);
    const {itemWidth} = this.props;
    return (
      // 上面导航栏的样式
      <TabBar
        scrollEnabled={true}
        {...props}
        style={this.bgC}
        labelStyle={{fontSize: pxToDp(32), fontWeight: 'normal'}}
        activeColor={'#FFFFFF'}
        inactiveColor={'#FFE4D8'}
        indicatorStyle={this.bottomLine}
        tabStyle={{width: 'auto', minWidth: itemWidth}}
        onTabPress={({route, preventDefault}) => {
          this.renderRankListEmitter(route);
        }}
        renderLabel={({route, focused, color}) => (
          <View>
            <Text
              style={{
                fontWeight: focused ? 'bold' : 'normal',
                color,
              }}>
              {route.title}
            </Text>
            <View style={{height: 1}}>
              <Text
                style={{
                  fontWeight: 'bold',
                  color: 'transparent',
                }}>
                {route.title}
              </Text>
            </View>
          </View>
        )}
      />
    );
  };

  // 还是懒加载
  _renderLazyPlaceholder = ({route}) => <LazyPlaceholder route={route} />;

  _renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  });

  bottomLine = () => {
    // props中传入的每个item宽度
    const {itemWidth} = this.props;
    return {
      height: 60,
      width: itemWidth * 0.6,
      borderRadius: 30,
      marginLeft: itemWidth * 0.2,
      marginBottom: 18,
      backgroundColor: '#FEC60B',
      elevation: 10,
    };
  };

  render() {
    return (
      <TabView
        navigationState={this.state}
        renderScene={this._renderScene}
        renderTabBar={this._renderTabBar}
        onIndexChange={this._handleIndexChange}
        // 选中的颜色
        activeColor={'#000'}
        // 没有选中的颜色
        inactiveTintColor={'#999'}
        // 选中下划线的样式
        indicatorStyle={this.bottomLine}
        // 每一个tab的宽度
        tabStyle={{width: 90}}
        // 懒加载相关代码
        lazy={true}
        lazyPreloadDistance={1}
        renderLazyPlaceholder={this._renderLazyPlaceholder}
        initialLayout={{width: Dimensions.get('window').width}}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  tabBar: {
    flexDirection: 'row',
    paddingTop: Constants.statusBarHeight,
  },
  tabItem: {
    flex: 1,
    alignItems: 'center',
    padding: 16,
  },
});