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

✨项目搭建及初始化

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

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，这个版本我出现了一个问题：出现两个底部条。