devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

React-Native: 页面搭建，导航配置_创建一个reactnative 反映导航项目

作者：盐析白兔 | 2024-05-06 10:50:07

赞

踩

创建一个reactnative 反映导航项目

第一步：安装

npm i @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack @react-navigation/bottom-tabs

如果是iOS上跑程序，就需要重新去pod install，把上面新增的库，下载到工程本地 

第二步：配置

1、如图所示，在 src/pages 目录下，

新建 index.js --- 用来导出所有页面

新建tabBar/Home.js --- 项目首页

新建 My.js --- 项目个人中心页

新建 TabBarNavigator.js --- 配置tabBar页面

新建 launchPage/LaunchPage.js --- 项目启动页

新建 launchPage/GuidePage.js --- 项目引导页

2、编写index.js

  1. import LaunchPage from './launchPage/LaunchPage';
  2. import GuidePage from './launchPage/GuidePage';
  3. import Home from './tabBar/Home';
  4. import My from './tabBar/My';
  5. import TabBarNavigator from './tabBar/TabBarNavigator';
  6.  
  7. const appRouter = [
  8.   {
  9.     name: 'LaunchPage',
  10.     component: LaunchPage,
  11.     headerShown: false,
  12.   },
  13.   {
  14.     name: 'GuidePage',
  15.     component: GuidePage,
  16.     headerShown: false,
  17.   },
  18.   {
  19.     name: 'Home',
  20.     component: Home,
  21.     headerShown: false,
  22.   },
  23.   {
  24.     name: 'My',
  25.     component: My,
  26.     headerShown: false,
  27.   },
  28.   {
  29.     name: 'TabBarNavigator',
  30.     component: TabBarNavigator,
  31.     headerShown: false,
  32.   },
  33. ];
  34.  
  35. export default appRouter;

注意name和component名字可以不一样，但是后续 navigation 的页面跳转都是用 name，以免造成开发上面的心智困难，建议弄成一样，不然后续你看着页面文件想不起页面的name命名。。。

3、修改App.js

Provider 是全局状态管理redux --- 不需要可以去掉

AntdProvider 是@ant-design/react-native的Provider自定义重命名，有的这个东西antd的一些弹窗才能显示 --- 不需要可以去掉

  1. import React from 'react';
  2. import {StyleSheet} from 'react-native';
  3. import {NavigationContainer} from '@react-navigation/native';
  4. import {createNativeStackNavigator} from '@react-navigation/native-stack';
  5. import {
  6.   SafeAreaProvider,
  7.   initialWindowMetrics,
  8. } from 'react-native-safe-area-context';
  9. import {Provider} from 'react-redux';
  10. import {Provider as AntdProvider} from '@ant-design/react-native';
  11. import appRouter from 'src/pages';
  12. import store from 'src/redux/store';
  13.  
  14. const Stack = createNativeStackNavigator();
  15.  
  16. export default function App() {
  17.   console.log(appRouter);
  18.   return (
  19.     <Provider store={store}>
  20.       <AntdProvider>
  21.         <SafeAreaProvider initialMetrics={initialWindowMetrics}>
  22.           <NavigationContainer>
  23.             <Stack.Navigator initialRouteName={'LaunchPage'}>
  24.               {appRouter &&
  25.                 appRouter.map(item => {
  26.                   return (
  27.                     <Stack.Screen
  28.                       key={item.name}
  29.                       name={item.name}
  30.                       component={item.component}
  31.                       options={{headerShown: item.headerShown}}
  32.                     />
  33.                   );
  34.                 })}
  35.             </Stack.Navigator>
  36.           </NavigationContainer>
  37.         </SafeAreaProvider>
  38.       </AntdProvider>
  39.     </Provider>
  40.   );
  41. }
  42.  
  43. const styles = StyleSheet.create({});

此处我的默认页面为 LaunchPage 就启动App 进入首页前，必须经过 LaunchPage页面。

在LaunchPage页面初始化一些App数据很有必要。

如果说后续配置了App的启动图，再到我们页面的启动页会显示两张，解决方法也很简单，就是将App的启动图和我们页面的启动页图设置成同一张图即可

4、 编写LaunchPage.js

  1. import React, {useEffect} from 'react';
  2. import {NativeModules, Platform, StatusBar, View} from 'react-native';
  3. import {useNavigation} from '@react-navigation/native';
  4. import {commonSize, commonStyle} from 'src/assets/css/commonStyle';
  5. import {storageSync} from 'src/utils/storage';
  6. import {navigateReplace, setNavigation} from 'src/utils/navigation';
  7. import {useSafeAreaInsets} from 'react-native-safe-area-context';
  8. import {CtImage} from 'src/components';
  9. import Orientation from '@hortau/react-native-orientation-locker';
  10.  
  11. const LaunchPage = () => {
  12.   // 给 navigation.js 传递 navigation
  13.   const navigation = useNavigation();
  14.   setNavigation(navigation);
  15.   const insets = useSafeAreaInsets();
  16.  
  17.   // 获取状态栏高度
  18.   const {StatusBarManager} = NativeModules;
  19.   if (Platform.OS === 'ios') {
  20.     commonSize.statusBarHeight = StatusBarManager.HEIGHT;
  21.   } else if (Platform.OS === 'android') {
  22.     commonSize.statusBarHeight =
  23.       (StatusBarManager && StatusBarManager.HEIGHT) || StatusBar.currentHeight;
  24.   }
  25.  
  26.   // 获取iOS安全区域距离
  27.   // 注意 iOS的状态栏高度 与 iOS的顶部安全距离 不一定一样高
  28.   // 在布局特殊全面屏头部的时候 建议使用 iOS的顶部安全距离
  29.   if (Platform.OS === 'ios') {
  30.     commonSize.safeAreaInsetTop = insets.top;
  31.     commonSize.safeAreaInsetBottom = insets.bottom;
  32.     commonSize.safeAreaInsetLeft = insets.left;
  33.     commonSize.safeAreaInsetRight = insets.right;
  34.   }
  35.  
  36.   // 获取当前设备的方向
  37.   commonSize.screenOrientation = Orientation.getInitialOrientation();
  38.  
  39.   useEffect(() => {
  40.     // 判断用户是否是第一层启动App 是则进入引导页 否则进入首页
  41.     setTimeout(async () => {
  42.       let isFirstLaunchApp = await storageSync.getStorage('isFirstLaunchApp');
  43.       if (Number(isFirstLaunchApp) === 1) {
  44.         goHome();
  45.       } else {
  46.         goGuide();
  47.       }
  48.     }, 1000);
  49.   }, []);
  50.  
  51.   const goHome = () => {
  52.     navigateReplace('TabBarNavigator');
  53.   };
  54.  
  55.   return (
  56.     <View style={commonStyle.container}>
  57.       <CtImage source={require('src/assets/images/img_launchPage.jpg')} />
  58.     </View>
  59.   );
  60. };
  61.  
  62. export default LaunchPage;

5、编写GuidePage.js

  1. import React, {useState} from 'react';
  2. import {StyleSheet, View} from 'react-native';
  3. import {CustomSwiper, CtBtn} from 'src/components';
  4. import {commonStyle} from 'src/assets/css/commonStyle';
  5. import {navigateReplace} from 'src/utils/navigation';
  6. import {storageSync} from 'src/utils/storage';
  7.  
  8. const GuidePage = () => {
  9.   const [swiperCurrentIndex, setSwiperCurrentIndex] = useState(0);
  10.   const guideList = [
  11.     {
  12.       image_url: require('src/assets/images/img_GuidePage01.jpg'),
  13.       name: '001',
  14.     },
  15.     {
  16.       image_url: require('src/assets/images/img_GuidePage02.jpg'),
  17.       name: '002',
  18.     },
  19.     {
  20.       image_url: require('src/assets/images/img_GuidePage03.jpg'),
  21.       name: '003',
  22.     },
  23.   ];
  24.   const getSwiperChange = item => {
  25.     setSwiperCurrentIndex(item.index);
  26.   };
  27.   const guideSwiperMask = () => {
  28.     if (swiperCurrentIndex === guideList.length - 1) {
  29.       return (
  30.         <View style={[commonStyle.flexCenter, styles.swiperMaks]}>
  31.           <CtBtn
  32.             btnText={"Let's go"}
  33.             onPress={() => {
  34.               storageSync.setStorage('isFirstLaunchApp', 1);
  35.               navigateReplace('TabBarNavigator');
  36.             }}
  37.           />
  38.         </View>
  39.       );
  40.     } else {
  41.       return <View style={styles.swiperMaks} />;
  42.     }
  43.   };
  44.  
  45.   return (
  46.     <View style={styles.container}>
  47.       <CustomSwiper
  48.         onSwiperChange={getSwiperChange}
  49.         data={guideList}
  50.         autoplay={false}
  51.       />
  52.       {guideSwiperMask(guideList)}
  53.     </View>
  54.   );
  55. };
  56.  
  57. export default GuidePage;
  58.  
  59. const styles = StyleSheet.create({
  60.   container: {
  61.     flex: 1,
  62.   },
  63.   swiperMaks: {
  64.     position: 'absolute',
  65.     left: 0,
  66.     right: 0,
  67.     bottom: 60,
  68.   },
  69. });

这个页面就是一个轮播图，轮播到最后一张引导图的时候，显示一个按钮，点击按钮，进入首页

6、编写TabBarNavigator.js

  1. import React from 'react';
  2. import {StyleSheet, Image} from 'react-native';
  3. import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
  4. import {commonColors} from 'src/assets/css/commonStyle';
  5. import Home from './Home';
  6. import My from './My';
  7.  
  8. const Tab = createBottomTabNavigator();
  9.  
  10. const TabBarNavigator = () => {
  11.   return (
  12.     <Tab.Navigator
  13.       initialRouteName={Home}
  14.       screenOptions={{
  15.         tabBarHideOnKeyboard: true,
  16.         tabBarInactiveTintColor: commonColors.textColorSecondary,
  17.         tabBarActiveTintColor: commonColors.textColorPrimary,
  18.         tabBarStyle: styles.tabBarStyle,
  19.       }}>
  20.       <Tab.Screen
  21.         name={'Home'}
  22.         component={Home}
  23.         options={{
  24.           headerShown: false,
  25.           tabBarIcon: ({focused}) => (
  26.             <Image
  27.               style={styles.tabBarIcon}
  28.               source={
  29.                 focused
  30.                   ? require('src/assets/images/tabBar/tab_home_active.png')
  31.                   : require('src/assets/images/tabBar/tab_home.png')
  32.               }
  33.             />
  34.           ),
  35.         }}
  36.       />
  37.       <Tab.Screen
  38.         name={'My'}
  39.         component={My}
  40.         options={{
  41.           headerShown: false,
  42.           tabBarIcon: ({focused}) => (
  43.             <Image
  44.               style={styles.tabBarIcon}
  45.               source={
  46.                 focused
  47.                   ? require('src/assets/images/tabBar/tab_my_active.png')
  48.                   : require('src/assets/images/tabBar/tab_my.png')
  49.               }
  50.             />
  51.           ),
  52.         }}
  53.       />
  54.     </Tab.Navigator>
  55.   );
  56. };
  57.  
  58. export default TabBarNavigator;
  59.  
  60. const styles = StyleSheet.create({
  61.   tabBarStyle: {
  62.     backgroundColor: commonColors.bgColorWhite,
  63.   },
  64.   tabBarIcon: {
  65.     resizeMode: 'cover',
  66.     width: 28,
  67.     height: 28,
  68.   },
  69. });

 7、上面的代码里面，我重新封装了navigation。在 src/utils 下 新建navigation.js

  1. import React from 'react';
  2. import {StackActions} from '@react-navigation/native';
  3. import indexConfig from 'src/config/index.config';
  4.  
  5. let _navigation;
  6.  
  7. function setNavigation(navigation) {
  8.   _navigation = navigation;
  9. }
  10.  
  11. const navigatePush = (routeName, params) => {
  12.   _navigation.dispatch(StackActions.push(routeName, params));
  13. };
  14.  
  15. const navigateReplace = (routeName, params) => {
  16.   _navigation.dispatch(StackActions.replace(routeName, params));
  17. };
  18. const navigateBack = (count = 1) => {
  19.   _navigation.dispatch(StackActions.pop(count));
  20. };
  21. const navigateToTop = () => {
  22.   _navigation.dispatch(StackActions.popToTop());
  23. };
  24.  
  25. const authNavigatePush = (routeName, params) => {
  26.   let accessToken = indexConfig.accessToken;
  27.   if (accessToken) {
  28.     navigatePush(routeName, params);
  29.   } else {
  30.     navigatePush('Login', params);
  31.   }
  32. };
  33.  
  34. const authNavigateReplace = (routeName, params) => {
  35.   let accessToken = indexConfig.accessToken;
  36.   if (accessToken) {
  37.     navigateReplace(routeName, params);
  38.   } else {
  39.     navigatePush('Login', params);
  40.   }
  41. };
  42.  
  43. export {
  44.   setNavigation,
  45.   navigatePush,
  46.   navigateReplace,
  47.   navigateBack,
  48.   navigateToTop,
  49.   authNavigatePush,
  50.   authNavigateReplace,
  51. };

在 LaunchPage 页面 调用 setNavigation(navigation); 把 useNavigation hock方法传进来，

这样以来，就不用在每个页面去写 useNavigation。并且 新增了 authNavigatePush 等方法，可以简单判断用户是否登录。

8、此外，贴上我的 src/assets/css/commonStyle.js

  1. import {Dimensions, Platform, StatusBar, StyleSheet} from 'react-native';
  2.  
  3. const {width, height} = Dimensions.get('window');
  4.  
  5. const commonColors = {
  6.   colorPrimary: '#FFD200',
  7.   colorPrimaryRgba: 'rgba(255, 210, 0, 0.2)',
  8.  
  9.   colorSuccess: '#07c160',
  10.   colorWarning: '#F59A23',
  11.   colorDanger: '#ee0a24',
  12.   colorInfo: '#fffbe8',
  13.  
  14.   bgColorBlack: '#000',
  15.   bgColorWhite: '#fff',
  16.   bgColorPrimary: '#F5F5F5',
  17.   bgColorTransparent: 'transparent',
  18.  
  19.   textColorPrimary: '#333',
  20.   textColorRegular: '#666',
  21.   textColorSecondary: '#999',
  22.   textColorPlaceholder: '#E0E0E0',
  23.  
  24.   borderColorBase: '#AAA',
  25.   borderColorDark: '#999',
  26.   borderColorLight: '#E5E5E5',
  27.   borderColorLighter: '#E0E0E0',
  28. };
  29.  
  30. const commonSize = {
  31.   screenOrientation: '',
  32.   width: width,
  33.   height: height,
  34.   statusBarHeight: 0,
  35.   safeAreaInsetTop: 0,
  36.   safeAreaInsetBottom: 0,
  37.   safeAreaInsetLeft: 0,
  38.   safeAreaInsetRight: 0,
  39.   navBarHeight: 44,
  40.  
  41.   radiusMedium: 12,
  42.   radiusSmall: 8,
  43.   radiusMini: 4,
  44.  
  45.   borderWidth: StyleSheet.hairlineWidth,
  46. };
  47. const commonStyle = {
  48.   /** flex **/
  49.   flexLeftCenter: {
  50.     flexDirection: 'row',
  51.     alignItems: 'center',
  52.   },
  53.   flexCenter: {
  54.     flexDirection: 'row',
  55.     alignItems: 'center',
  56.     justifyContent: 'center',
  57.   },
  58.   flexRightCenter: {
  59.     flexDirection: 'row',
  60.     alignItems: 'center',
  61.     justifyContent: 'flex-end',
  62.   },
  63.   flexBetween: {
  64.     flexDirection: 'row',
  65.     alignItems: 'center',
  66.     justifyContent: 'space-between',
  67.   },
  68.   flexColumnLeft: {
  69.     flexDirection: 'column',
  70.     alignItems: 'flex-start',
  71.   },
  72.   flexColumnCenter: {
  73.     flexDirection: 'column',
  74.     alignItems: 'center',
  75.     justifyContent: 'center',
  76.   },
  77.   flexColumnRight: {
  78.     flexDirection: 'column',
  79.     alignItems: 'flex-end',
  80.   },
  81.   flexColumnBetween: {
  82.     flexDirection: 'column',
  83.     justifyContent: 'space-between',
  84.   },
  85.   flexAround: {
  86.     flexDirection: 'row',
  87.     justifyContent: 'space-around',
  88.   },
  89.   flexWrap: {
  90.     flexDirection: 'row',
  91.     flexWrap: 'wrap',
  92.   },
  93.  
  94.   testBorder: {
  95.     borderWidth: 5,
  96.     borderColor: 'red',
  97.   },
  98.   bgFFF: {
  99.     backgroundColor: commonColors.bgColorWhite,
  100.   },
  101.   bg000: {
  102.     backgroundColor: commonColors.bgColorBlack,
  103.   },
  104.   container: {
  105.     flex: 1,
  106.     position: 'relative',
  107.     backgroundColor: commonColors.bgColorPrimary,
  108.   },
  109.   relative: {
  110.     position: 'relative',
  111.   },
  112.   absolute: {
  113.     position: 'absolute',
  114.   },
  115. };
  116.  
  117. export {commonColors, commonSize, commonStyle};
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/543840
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号