react-navigation 底部导航

Installation

 

Install the react-navigation package in your React Native project.

yarn add react-navigation
# or with npm
# npm install --save react-navigation

Next, install react-native-gesture-handler. If you’re using the Expo managed workflow then you don’t need to do anything here, it’s included in the SDK. Otherwise:

yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler

Link all native dependencies:

 

react-native link react-native-gesture-handler

 

 

 https://reactnavigation.org/docs/en/getting-started.html

 

参考:https://www.cnblogs.com/maopixin/p/10034763.html

 

转载于:https://my.oschina.net/u/2444569/blog/3032890

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native 提供了一种方便的方式来创建底部导航栏。你可以使用第三方库,比如 `react-navigation` 或 `react-native-navigation`,来实现底部导航。 下面是使用 `react-navigation` 库创建底部导航的简单示例: 1. 首先,确保你已经安装了 `react-navigation` 库: ``` npm install @react-navigation/native ``` 2. 创建一个底部导航的组件: ```jsx import React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { NavigationContainer } from '@react-navigation/native'; import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'; import { faHome, faUser } from '@fortawesome/free-solid-svg-icons'; const Tab = createBottomTabNavigator(); const BottomTabNavigator = () => { return ( <NavigationContainer> <Tab.Navigator> <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarIcon: ({ color, size }) => ( <FontAwesomeIcon icon={faHome} color={color} size={size} /> ), }} /> <Tab.Screen name="Profile" component={ProfileScreen} options={{ tabBarIcon: ({ color, size }) => ( <FontAwesomeIcon icon={faUser} color={color} size={size} /> ), }} /> </Tab.Navigator> </NavigationContainer> ); }; export default BottomTabNavigator; ``` 在上面的示例中,我们创建了一个包含两个屏幕(Home 和 Profile)的底部导航栏。我们使用了 `@fortawesome/react-native-fontawesome` 库来渲染图标,你也可以选择其他的图标库。 3. 创建 HomeScreen 和 ProfileScreen 组件,并实现它们的功能。 4. 在入口文件中使用底部导航组件: ```jsx import React from 'react'; import BottomTabNavigator from './BottomTabNavigator'; const App = () => { return <BottomTabNavigator />; }; export default App; ``` 这样,你就可以在 React Native 应用中使用底部导航栏了。当然,还有其他一些配置和功能可以使用,请参考 `react-navigation` 的文档以获取更多信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值