react-navigation createBottomTabNavigator 刷新问题

RN使用 createBottomTabNavigator 创建底部导航栏时,只会在第一次创建时调用 componentDidMount 钩子,当跳转到另一个页面,点击返回键再次返回到此页面时不会再次调用,但我们往往需要在返回此页面后重新执行获取数据等方法函数。

 

解决方法

 
componentDidMount() { this._navListener = this.props.navigation.addListener('didFocus', () => { this.getData(); }); } componentWillUnmount() { this._navListener.remove(); }

 

监听路由,即使页面没有被重新渲染,当路由 didFocus 时,也会执行回调函数。

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、付费专栏及课程。

余额充值