新手如何配置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时进行导航栏配置的一些步骤,欢迎大家提出更好的建议。

相关推荐
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 小时前
Chrome离线安装包下载
前端·chrome
m51272 小时前
LinuxC语言
java·服务器·前端