react-native 顶部导航栏

Z时代
2024-01-10
分类：综合

react

效果图：

项目结构如下：

views和下面的页面手动创建

环境依赖如下：

步骤

下载 react-native-scrollable-tab-view

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

编写代码

App.js

import React from 'react';
import { Button, Text, View,ScrollView} from 'react-native';
import { createStackNavigator, createBottomTabNavigator, createAppContainer } from 'react-navigation';
import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view';
//导入自定义页面
import RedianPage from './views/RedianPage';
import ToutiaoPage from './views/ToutiaoPage';
import YulePage from './views/YulePage';
//主页、头部导航
class HomeScreen extends React.Component {
  static navigationOptions = {
    title: '网易新闻精选',
    headerTitleStyle:{
      paddingLeft:65,
      fontSize:40,
      color:'white'
    },
    headerStyle:{
      backgroundColor:'red',
    },
  };
  render() {
    return (
         <ScrollableTabView
            tabBarInactiveTextColor='red' // 没有被选中的文字颜色
            tabBarActiveTextColor='black'       // 选中的文字颜色
            tabBarBackgroundColor='white'     // 选项卡背景颜色
            tabBarUnderlineStyle={{backgroundColor:'white',height:1}}   //下划线的样式
            initialPage={0}
            renderTabBar={() => <ScrollableTabBar style={{height: 40,borderWidth:0,elevation:2}} tabStyle={{height: 39}}
                                                underlineHeight={2}/>}
          >
            <RedianPage tabLabel='热点' />
            <ToutiaoPage tabLabel='头条' />
            <YulePage tabLabel='娱乐' />
            <Text tabLabel='体育'>体育</Text>
            <Text tabLabel='新闻'>新闻</Text>
            <Text tabLabel='搞笑'>搞笑</Text>
            <Text tabLabel='头条'>头条</Text>
            <Text tabLabel='冷门'>冷门</Text>
            <Text tabLabel='体育'>体育</Text>
        </ScrollableTabView>
    );
  }
}
//视频页
class VideoScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>22</Text>
      </View>
    );
  }
}
//我的页
class MineScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>我的</Text>  
      </View>
    );
  }
}
//注册导航
const HomeStack = createStackNavigator({
  Home: { screen: HomeScreen },
});
const SettingsStack = createStackNavigator({
  Video: { screen: VideoScreen },
});
const MineStack = createStackNavigator({
  Mine: { screen: MineScreen },
});
//底部导航栏
export default createAppContainer(createBottomTabNavigator(
  {
    Home: { screen: HomeStack },
    Video: { screen: SettingsStack },
    Mine:{ screen:MineStack }
  }));

ToutiaoPage.js

import React from 'react';
import {
  Text,
  View,
  ScrollView,
} from 'react-native';
import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view';
export default () => {
  return(
     <View>
        <Text>头条</Text>
      </View>
  );
}

YulePage.js

import React from 'react';
import {
  Text,
  View,
  ScrollView,
} from 'react-native';
import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view';
export default () => {
  return(
     <View>
        <Text>娱乐</Text>
      </View>
  );
}

其他页面可以写入自己想要的布局