React-Native 仿喜马拉雅APP项目笔记（多环境配置 项目配置路径 堆栈式导航）

Posted 2022-01-02 усил

✨项目搭建及初始化

• 📐创建项目前，先切换成淘宝源

npx nrm use taobao

补充：🌈如果之后需要切换回官方源可使用 npx nrm use npm

• 📏创建项目

npx react-native init 项目名称–template react-native-template-typescript

• 📐配置文件

• 📏增加项目目录（项目根路径）

✨多环境配置

• 📐下载第三方插件react-native-config
• 📏修改 android文件中 app/src/build.gradle 在文件末尾添加

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

• 📏在终端进入到ios文件 执行命令 pod install
• 📐在项目根目录下创建.env文件
• 📏接下来在使用的位置添加以下代码

import Config  from "react-native-config";
rend() 
   return (
      <Text>Config.API_URL</Text>
   )

✨项目配置路径

• 📐下载第三方插件库 babel-plugin-module-resolver

• 📏修改babel.config.js

module.exports = 
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      
        root: ['./src'],
        alias: 
          '@/utils': './src/utils',
          '@/pages': './src/pages',
          '@/navigator': './src/navigator',
          '@/models': "./src/models",
          '@/config': "./src/config",
          '@/components': "./src/components",
          '@/assets': './src/assets',
        
      
    ]
  ]
;

• 📐修改 tsconfig.json

   "compilerOptions": 
        "baseUrl": "./src",                      
        "paths": 
          "@/assets/*": ["assets/*"],
          "@/components/*": ["components/*"],
          "@/config/*": ["config/*"],
          "@/models/*": ["models/*"],
          "@/navigator/*": ["navigator/*"],
          "@/pages/*": ["pages/*"],
          "@/utils/*": ["utils/*"]
     ,                    
   

使用时，直接 @就有提示

✨安装导航器

官方文档

• 📏安装导航器核心插件 @react-navigation/native
• 📐并且安装核心插件的依赖
  • react-native-screens
  • react-native-safe-area-context
• 📏配置原生APP
  • 进入到iso执行命令 npx pod-install ios
  • 编辑MainActivity.java位于android/app/src/main/java/<your package name>/MainActivity.java.

添加下面代码

package com.ximalaya;
import android.os.Bundle;
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity 

  /**
   * Returns the name of the main component registered from javascript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() 
    return "ximalaya";
  
  @Override
  protected void onCreate(Bundle savedInstanceState) 
      super.onCreate(null);
  

编写堆栈式导航（navigator/index.js）

import React from "react";
import  NavigationContainer from "@react-navigation/native";
import  CardStyleInterpolators, createStackNavigator, HeaderStyleInterpolators, StackNavigationProp from "@react-navigation/stack";
import BottomTabs from "./BottomTabs";

import  Platform, StyleSheet from "react-native";

// 定义堆栈式导航(有哪些类型)
export type RootStackParamList = 
    // 底部导航
    BottomTabs: 
        screen?: string;
    ;  


// 创建堆栈式导航
let Stack = createStackNavigator<RootStackParamList>()

class Navigator extends React.Component 
    render() 
        return (
            <NavigationContainer>
                <Stack.Navigator 
                   screenOptions=
                    // 使 android 和 ios 的动画样式一致
                    headerMode:"float",
                    // 头部文字居中
                    headerTitleAlign: "center",
                    // 定义动画一致
                    headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
                    cardStyleInterpolator:CardStyleInterpolators.forHorizontalIOS,
                    // 打开 android 中的手指切换
                    gestureEnabled: true,
                    // 设置安装屏幕切换为水平（默认是垂直）
                    gestureDirection: 'horizontal',
                    // 修改样式
                    headerStyle: 
                        ...Platform.select(
                            android: 
                               elevation: 0,
                               borderBottomWidth: StyleSheet.hairlineWidth,
                            ,
                        )
                    
                   
                   >
                 // 底部导航 
                 <Stack.Screen name="BottomTabs" component=BottomTabs options=headerTitle: "首页"/>     
                </Stack.Navigator>
            </NavigationContainer>
        )
    

// 将导航配置信息导出（后期在项目跳转是可以携带参数）
export type RootStackNavigation = StackNavigationProp<RootStackParamList>;

export default Navigator

标签导航 BottomTabs

import React from "react";
import  RouteProp, TabNavigationState, getFocusedRouteNameFromRoute  from "@react-navigation/native";
import  createBottomTabNavigator  from "@react-navigation/bottom-tabs"
import  RootStackNavigation, RootStackParamList  from "./index";
import Home from "@/pages/Home"
import Account from "@/pages/Account"
import Listen from "@/pages/Listen"
import Found from "@/pages/Found"
import  LogBox  from "react-native";

// 底部导航（有哪些标签）
export type BottomTabParamList = 
  Home: undefined;
  Listen: undefined;
  Found: undefined;
  Account: undefined;

// 创建底部导航
const Tab = createBottomTabNavigator<BottomTabParamList>();

type Route = RouteProp<RootStackParamList, "BottomTabs"> & 
  state?: TabNavigationState<BottomTabParamList>;
;
// 接收参数接口
interface IProps 
  navigation: RootStackNavigation,
  // 接收堆栈式导航中的底部导航参数
  route: Route

function getHeaderTitle(route: Route) 
  // getFocusedRouteNameFromRoute 内置获取当前点击的标签名（对应 BottomTabParamList ）
  const routeName = getFocusedRouteNameFromRoute(route)
  switch (routeName) 
    case 'Home':
      return '首页';
    case 'Listen':
      return '我听';
    case 'Found':
      return '发现';
    case 'Account':
      return '账户';
    default:
      return '首页';
  

class BottomTabs extends React.Component<IProps> 
  componentDidUpdate() 
    const  navigation, route  = this.props;
    navigation.setOptions(
      headerTitle: getHeaderTitle(route)
    )

  
  // 忽略掉在 android 中的警告
  componentDidMount() 
    LogBox.ignoreAllLogs()
  
  render() 
    return (
      <Tab.Navigator
        tabBarOptions=
          activeTintColor: '#f86442',
        
      >
        <Tab.Screen name="Home" component=Home options= tabBarLabel: '首页'  />
        <Tab.Screen name="Listen" component=Listen options= tabBarLabel: '我听'  />
        <Tab.Screen name="Found" component=Found options= tabBarLabel: '发现'  />
        <Tab.Screen name="Account" component=Account options= tabBarLabel: '我的'  />
      </Tab.Navigator>
    )
  


export default BottomTabs

✨总结

       由于React Native更新迭代速度也比较快，其他插件可能跟不上，导致无法兼容，出现一些奇怪的问题。可能现在这个方法可以使用，过一段时间后就不能使用了。刚开始使用就是吃了这个亏，出现了一些小问题。建议看官方文档以及结合实际调试进行开发。

下面是我目前使用到的插件及其版本

这里需要注意：@react-navigation/bottom-tabs下载的版本是 5.1.1。截至当前最新的版本是 6.0.9，这个版本我出现了一个问题：出现两个底部条。