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

相关推荐
有梦想的刺儿5 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具26 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫2 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web