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

相关推荐
Σίσυφος19001 小时前
halcon 条形码、二维码识别、opencv识别
前端·数据库
学代码的小前端1 小时前
0基础学前端-----CSS DAY13
前端·css
css趣多多3 小时前
案例自定义tabBar
前端
姑苏洛言4 小时前
DeepSeek写微信转盘小程序需求文档,这不比产品经理强?
前端
林的快手4 小时前
CSS列表属性
前端·javascript·css·ajax·firefox·html5·safari
匹马夕阳5 小时前
ECharts极简入门
前端·信息可视化·echarts
API_technology5 小时前
电商API安全防护:JWT令牌与XSS防御实战
前端·安全·xss
yqcoder5 小时前
Express + MongoDB 实现在筛选时间段中用户名的模糊查询
java·前端·javascript
十八朵郁金香5 小时前
通俗易懂的DOM1级标准介绍
开发语言·前端·javascript
m0_528723816 小时前
HTML中,title和h1标签的区别是什么?
前端·html