RN 顶部导航

最新推荐文章于 2025-03-11 11:29:00 发布

原创最新推荐文章于 2025-03-11 11:29:00 发布 · 576 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#RN

本文介绍了一个使用React Navigation创建顶部标签导航的示例，通过定义不同的屏幕组件如Good、Share、Ask和Job，并将它们整合到TabNavigator中，实现了带有懒加载、滑动切换和动画效果的交互式导航体验。

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

import React from “react”;
import List from “…/fragment/List”;
import { createTabNavigator } from “react-navigation”;

const Good = () => {
return ;
};
const Share = () => {
return ;
};
const Ask = () => {
return ;
};
const Job = () => {
return ;
};

const TopNav = createTabNavigator(
{
Good: {
screen: Good,
navigationOptions: {
title: “精华”
}
},
Share: {
screen: Share,
navigationOptions: {
title: “分享”
}
},
Ask: {
screen: Ask,
navigationOptions: {
title: “问答”
}
},
Job: {
screen: Job,
navigationOptions: {
title: “工作”
}
}
},
{
lazy: true,
tabBarPosition: “top”, //切换条位置
swipeEnabled: true, //是否可以滑动
animationEnabled: true //滑动效果
}
);