头部导航栏页面

最新推荐文章于 2024-11-16 16:40:28 发布

史蒂芬啊

最新推荐文章于 2024-11-16 16:40:28 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42832884/article/details/82731972

本文介绍了一个使用React Native实现的顶部标签导航组件。通过createTabNavigator创建了四个标签页，每个标签页显示不同类型的内容，并支持懒加载、滑动切换等功能。

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

import React, { Component } from "react";
import { View, Text } from "react-native";
import { createTabNavigator } from "react-navigation"; // 导入头部导航
import List from "./List";

const One = () => {   //给标签传递数据，获取从网络的数据
    return <List tab="good" />;
};

const Two = () => {
    return <List tab="ask" />;
};

const Three = () => {
    return <List tab="share" />;
};
const Four = () => {
    return <List tab="job" />;
};
const TopNav = createTabNavigator(
  {
    One: {
      // 标签1
      screen: One,
      navigationOptions: {
        title: "精华"
      }
    },
    Two: {
      screen: Two,
      navigationOptions: {
        title: "工作"
      }
    },
    Three: {
      screen: Three,
      navigationOptions: {
        title: "问答"
      }
    },
    Four: {
      screen: Four,
      navigationOptions: {
        title: "分享"
      }
    }
  },
  {
    lazy: true, //懒加载
    tabBarPosition: "top", //切换条位置
    swipeEnabled: true, //是否可以滑动
    animationEnabled: true //滑动效果
  }
);
export default TopNav;