React Native react-navigation 路由导航库

痛定思痛。 2021-12-10 20:43 180阅读 0赞

> RN 项目 安装 react-navigation 路由导航库 react-native-vector-icons 图标库

# 安装 react-navigation 
    yarn add react-navigation react-native-gesture-handler react-native-vector-icons

// package.json
    { 
      "name": "RNApp",
      "version": "0.0.1",
      "private": true,
      "scripts": { 
        "start": "react-native start",
        "test": "jest",
        "lint": "eslint .",
        "postinstall": "npx jetify"
      },
      "dependencies": { 
        "@ant-design/react-native": "^3.1.9",
        "lodash": "^4.17.11",
        "react": "16.8.6",
        "react-native": "0.60.0",
        "react-native-gesture-handler": "^1.3.0",
        "react-native-swiper": "^1.6.0-nightly.2",
        "react-native-vector-icons": "^6.6.0",
        "react-navigation": "^3.11.0"
      },
      "devDependencies": { 
        "@babel/core": "^7.5.0",
        "@babel/runtime": "^7.5.0",
        "@react-native-community/eslint-config": "^0.0.5",
        "babel-jest": "^24.8.0",
        "babel-plugin-import": "^1.12.0",
        "eslint": "^6.0.1",
        "jest": "^24.8.0",
        "jetifier": "^1.6.1",
        "metro-react-native-babel-preset": "^0.55.0",
        "react-test-renderer": "16.8.6"
      },
      "jest": { 
        "preset": "react-native"
      }
    }

> android环境运行，需安装 **jetifier**，在package.json中配置 “postinstall”: “npx jetify”，执行 yarn

# 安装 jetifier
    yarn add jetifier --dev

> 具体使用方法如下：  
> createStackNavigator：用于定义路由，实现页面跳转  
> createBottomTabNavigator：用于定义底部导航栏，实现页面切换  
> createAppContainer：用于管理路由、导航容器  
> Icon：用于定义字体图标  
> this.props.navigation.navigate(“NewsDetail”, \{ content: “I come from News” \})：用于父子路由跳转，传参  
> this.props.navigaiton.state.params：用于接收父级路由传参  
> 同时还可以动态设置子路由组件的标题

/** * @Author: brady * @Date: 2019/7/10 * @Last Created time: 16:19:30 * @Description: */
    import React from "react";
    import { 
      createStackNavigator,
      createBottomTabNavigator,
      createAppContainer
    } from "react-navigation";
    import Icon from "react-native-vector-icons/Ionicons";
    
    import Home from "../views/Home";
    import News from "../views/News";
    import Personal from "../views/Personal";
    import HomePage from "../views/HomePage";
    import NewsDetail from "../views/NewsDetail";
    import PersonalInfo from "../views/PersonalInfo";
    
    // 设置路由
    const HomeRouteConfigs = { 
      Home: { 
        screen: Home,
        navigationOptions: { 
          // header: null,
          title: "首页"
        }
      },
      HomePage: { 
        screen: HomePage,
        navigationOptions: { 
          title: "首页信息"
        }
      }
    };
    const NewsRouteConfigs = { 
      News: { 
        screen: News,
        navigationOptions: { 
          title: "新闻"
        }
      },
      NewsDetail: { 
        screen: NewsDetail,
        navigationOptions: ({  navigation }) => ({ 
          title: `${ navigation.state.params.title}`
        })
      }
    };
    const PersonalRouteConfigs = { 
      Personal: { 
        screen: Personal,
        navigationOptions: { 
          title: "个人中心"
        }
      },
      PersonalInfo: { 
        screen: PersonalInfo,
        navigationOptions: { 
          title: "我的资料"
        }
      }
    };
    // 全局配置
    const StackNavigatorConfig = { 
      headerLayoutPreset: "center",
      defaultNavigationOptions: { 
        headerStyle: { 
          gesturesEnabled: false,
          backgroundColor: "rgb(16, 142, 233)"
        },
        headerTitleStyle: { 
          color: "#fff"
        },
        headerTintColor: "#fff",
        headerBackTitle: null
      },
      cardStyle: {  backgroundColor: "#ccc" }
    };
    const HomeTab = createStackNavigator(HomeRouteConfigs, StackNavigatorConfig);
    const NewsTab = createStackNavigator(NewsRouteConfigs, StackNavigatorConfig);
    const PersonalTab = createStackNavigator(PersonalRouteConfigs, StackNavigatorConfig);
    
    // 隐藏子路由 tabBar
    let setTabBar = StackNavigatorArr => { 
      StackNavigatorArr.map(item => { 
        item.navigationOptions = ({  navigation }) => { 
          let tabBarVisible = true;
          if (navigation.state.index > 0) { 
            tabBarVisible = false;
          }
          return { 
            tabBarVisible
          };
        };
      });
    };
    setTabBar([HomeTab, NewsTab, PersonalTab]);
    
    // 设置tabBar
    const TabRouteConfigs = { 
      Home: { 
        screen: HomeTab,
        navigationOptions: ({  navigation }) => ({ 
          tabBarLabel: "首页",
          tabBarIcon: ({  tintColor, focused }) => (
            <Icon
              // name={focused ? "ios-home" : "ios-home"}
              name="ios-home"
              size={ 26}
              style={ {  color: tintColor }}
            />
          )
        })
      },
      News: { 
        screen: NewsTab,
        navigationOptions: ({  navigation }) => ({ 
          tabBarLabel: "新闻",
          tabBarIcon: ({  tintColor, focused }) => (
            <Icon
              // name={focused ? "ios-paper" : "ios-paper"}
              name="ios-paper"
              size={ 26}
              style={ {  color: tintColor }}
            />
          )
        })
      },
      Personal: { 
        screen: PersonalTab,
        navigationOptions: ({  navigation }) => ({ 
          tabBarLabel: "个人中心",
          tabBarIcon: ({  tintColor, focused }) => (
            <Icon
              // name={focused ? "ios-contact" : "ios-contact"}
              name="ios-contact"
              size={ 26}
              style={ {  color: tintColor }}
            />
          )
        })
      }
    };
    const TabNavigatorConfig = { 
      initialRouteName: "Home",
      tabBarOptions: { 
        showIcon: true
      }
    };
    const TabNavigator = createBottomTabNavigator(
      TabRouteConfigs,
      TabNavigatorConfig
    );
    
    export default createAppContainer(TabNavigator);

实现效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: /images/20211210/4a3c7551517c4a518d0ebcf9eb72d05a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]: /images/20211210/984dd06e68644f73ac4213384f7d3299.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 2]: /images/20211210/e4f634347b1b42a4a3eebe93f53523b2.png