新手如何配置react-native底部导航栏

最近做一个react native的项目,浅浅记录一下初始化配置,目标是构建一个底部的导航栏包含四个板块,同时每个页面内都能实现从主页面到二级页面的跳转。

初始化

官网给出了一些版本上的要求,如果是旧项目一定要去找对应版本的文档:

  • react-native >= 0.63.0
  • expo >= 41 (if you use Expo)
  • typescript >= 4.1.0 (if you use TypeScript)

安装依赖

java 复制代码
npm install @react-navigation/native react-native-screens react-native-safe-area-context

底部状态栏的依赖:

bash 复制代码
npm install @react-navigation/bottom-tabs

以上三个依赖是使用react-navigation必须安装的库,android还必须修改一项配置才能跑起来,否则会报一个找不到screen有关东西的错.

react-native-screens package requires one additional configuration step to properly work on Android devices. Edit MainActivity.kt or MainActivity.java file which is located under android/app/src/main/java/<your package name>/.

找到官网说的Android文件夹下面的MainActivity.kt,修改成这样:

kotlin 复制代码
  
import android.os.Bundle  //导入
// ... 
  
class MainActivity : ReactActivity() {  
  
 // ...
  override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(null)
    }  
}

基本结构

javascript 复制代码
export default function App() {  
return (  
<NavigationContainer>  
	<Tab.Navigator>  
		<Tab.Screen name="Home" component={HomeScreen} />  
		<Tab.Screen name="Settings" component={SettingsScreen} />  
	</Tab.Navigator>  
</NavigationContainer>  
	);  
}

其实在recat-navigation中,screen的概念很像是vue-router中的router-view,之后不管是通过导航栏跳转还是通过useNavigation这个hook函数跳转,记录的页面都是screen页面.

Tab.Navigator组件可以通过添加配置项实现自己的icon定制化等功能,官网实例的tabBarIcon如下:

javascript 复制代码
<Tab.Navigator  
screenOptions={({ route }) => ({  
tabBarIcon: ({ focused, color, size }) => {  
let iconName;  
  
if (route.name === 'Home') {  
iconName = focused  
? 'ios-information-circle'  
: 'ios-information-circle-outline';  
} else if (route.name === 'Settings') {  
iconName = focused ? 'ios-list' : 'ios-list-outline';  
}  
  
// You can return any component that you like here!  
return <Ionicons name={iconName} size={size} color={color} />;  
},  
tabBarActiveTintColor: 'tomato',  
tabBarInactiveTintColor: 'gray',  
})}  
>

嵌套路由

以上是官网提供的基础使用方式,但是在实际使用的过程中,除了导航栏最基础的tab外,页面内也需要实现二级页面的跳转功能,因为这种路由跳转方式并不是通过底部tab点击的方式实现的,页面内跳转使用的是react-navigationstack-navigation功能,所以此时需要导入新的依赖:

css 复制代码
npm i @react-navigation/native-stack
javascript 复制代码
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const HomeStack = createNativeStackNavigator();  
  
function HomeStackScreen() {  
return (  
	<HomeStack.Navigator>  
		<HomeStack.Screen name="Home" component={HomeScreen} />  
		<HomeStack.Screen name="Details" component={DetailsScreen} />  
	</HomeStack.Navigator>  
);  
}  
  
  
const Tab = createBottomTabNavigator();  
  
export default function App() {  
return (  
	<NavigationContainer>  
		<Tab.Navigator screenOptions={{ headerShown: false }}>  
			<Tab.Screen name="Home" component={HomeStackScreen} />  
			<Tab.Screen name="Settings" component={SettingsStackScreen} />  
		</Tab.Navigator>  
	</NavigationContainer>  
);  
}

在HomeStackScreen中会使用stack-navigate方式来记录用户访问的页面并通过在组件之间传递一个名为navigationprop来实现路由跳转,一些常用:

  • navigation.push('RouteName')
  • navigation.goBack()
  • navigation.navigate('RouteName')可以导航至任意存在的screen

我自己习惯使用的是创建 公共跳转按钮指定到要去的页面:

ini 复制代码
const NavigateBtn: React.FC<Props> = props => {  
  const nav = useNavigation<Props>();  
  
  const handlePress = () => {  
    nav.navigate(props.navAddress);  
  };  
  return (  
    <Pressable onPress={handlePress} style={styles.container}>  
        <Text style={props.styles}>{props.title}</Text>  
    </Pressable>  
  );  
};

以上就是我在刚开始使用react-native时进行导航栏配置的一些步骤,欢迎大家提出更好的建议。

相关推荐
sunbyte3 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊3 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林3 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君5 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库5 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端6 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED6 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪6 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程6 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常7 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程