20. React-native脚手架探索

本文总结

本文主要探讨了 React Native 脚手架 的使用与选择，介绍了两种主流工具：React Native CLI 和 Expo CLI，并对它们的特点进行了比较分析。🔧📱

• React Native CLI：适合需要原生模块能力、自定义程度更高的项目；
• Expo CLI：上手简单、配置少，适合快速开发和原型验证。
  文章还详细介绍了两者的优缺点、组成部分，帮助我们更好地理解它们的适用场景。
  在实战部分，文章讲解了：
• 如何启动项目与运行调试；
• 使用外部依赖包（如图标、HTTP 请求等）；
• 配置导航功能，包括：
• 路由传参数
• 配置 navigation header
• 使用 TabBar 与 Drawer 实现底部与侧边导航

最后总结指出，本节内容是 React Native 入门阶段的重要部分，帮助我们掌握脚手架选择与路由导航的基础使用🚀

🔍 关联问题：

Expo CLI 优势在哪？

• 上手快，零配置，支持 Web 平台
• 集成众多功能，如图片处理、推送通知等，开箱即用

• 热重载与 OTA 更新方便开发迭代

  如何选择合适的脚手架？

• 对原生模块依赖强、自定义需求多 ➜ React Native CLI

• 快速启动项目、功能通用、团队熟悉 JS ➜ Expo CLI

  React Native 后续怎么深入？

• 学习 新架构（JSI、Fabric、TurboModules）
• 掌握 原生模块桥接、性能优化与内存管理
• 深入使用 社区库（如 Reanimated、MMKV、Gesture Handler 等）

1、Rn脚手架的选择

前两章我们探索了rn的一些基础理论架构知识，那么现在让我们去进入正题。

现在主流的脚手架有两种React Native CLI和Expo Cli

React Native CLI是由 Facebook 创建的。这个脚手架有三个部分：原生iOS和Android，以及JavaScript。用这个的话你需要下载 Xcode 和 Android Studio。
它主要优点之一是它的灵活性。我们可以在原生模块上下载依赖或者写一些代码。但是，它其实对我们的原生开发能力是有一些要求的。

Expo Cli的话其实是一套整体（Expo）架构的一部分。expo其实是一个react app的框架和平台，它集成了打包、发布、测试，当然最重要的是它对于原生能力要求会低一些，我们通常只用在js中就能快速开发和迭代。

那么Expo框架包含了哪些部分那？

• Expo CLI: 一个命令行工具，可以创建项目模版，然后运行、构建和更新它们。
• Expo Go: 一个Android和iOS应用程序，可以直接在设备上运行你的项目（无需编译和签名），并且可以整个团队中一起共享你的项目开发。
• Expo Snack: 浏览器上的playground,就在线玩点小功能。
• Expo App Servieces(ESA): Expo的云服务。

Expo有很多的现成的功能，但是它也对项目施加了限制。我们不能手动连接自定义库到native上，我们通常都直接使用Expo cli提供的库就可以了。其实这就是为了一个版本的兼容性和降低门槛（就是不想调原生），Expo强制帮我们节约这个时间。

简单的说，就是它对没原生能力的同学比较友好。

2、实战

2.1、简单跑一下项目

先下脚手架 npm install -g expo-cli然后在你的目录下，跑expo init projectName，选第一个就行。

命令行要科学不然项目下载会很慢。

然后我们就可以开始我们的项目实战了。yarn start

紧接着就轮到Expo Go，它是一个移动端的app,安卓和ios都可以直接下。我就以ios为例，当你注册账号后，用你ios的相机直接扫这个二维码，然后会在expo go中打开项目，就像这样。

然后打开项目看到已经启动了

并且当我们在编辑器中修改了代码也是可以热更新的，可以看到它其实并不像我们传统rn项目中，还有android和ios目录，他完全就是我们的js代码。

2.2、如何使用外部依赖包

因为后面的所有文章都会有关于raact-navigation导航的内容，所以我们先来尝试下载它。

yarn add @react-navigation/native @react-navigation/native-stack

然后我们用expo来下载依赖

expo install react-native-screens react-native-safe-area-context

我们看到这是不是很迷，就科普一下其实这里就是expo帮你处理了一些rn的常用包，你的一些三方依赖是在expo-go里，但很多时候我们并不知道三方包到底能不能用，我们直接去rn的三方包网站去搜索，然后筛选一下，可以看到还是挺多的。而expo其实不仅可以加载三方包，本身也为你提供了很多不错的sdk,比如相机、音频、推送、人脸识别等（但我们其实现在这种开发模式是expo的dev模式，如果你想引入一些并不支持expo的包可以到dev build的模式，就也可以定制化的原生操作）。

那么我们直接来看一下react-navigation的使用。app.js是这样的

import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import Home from './src/pages/Home'
import Settings from './src/pages/Settings'
const Stack = createNativeStackNavigator()
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}        

createNativeStackNavigator()是一个设置你的导航的函数。它返回一个具有两个属性的对象，即屏幕组件和导航器组件，它们用于配置我们的导航。

对于screen这个组件，它的name可以理解为这个组件的key或者说组件的映射，然后compenent则是要渲染的组件，而在上述的代码中会默认渲染Home当打开app的时候。

import { View, Text, Button, StatusBar } from 'react-native'
import styles from './styles'
export default function Home({ navigation }) {
  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" />
      <Text>首页</Text>
      <Button title="Settings" onPress={() => navigation.navigate('Settings')} />
    </View>
  )
}

Home

而当按settings的时候,会定向到Settings这个屏幕，而navigation这个函数是通过screen传递给我们的。

而我们看到Settings这个组件,发现它是不是跟Home有些许不同，没错他上面有个导航栏，这里显示了组件名称和返回上一级的按钮，而它其实是react-navigation所提供的navigation bar。
}接下来我们看一下如何传参，如下

import { View, Text, Button, StatusBar } from 'react-native'
import styles from './styles'
export default function Settings({ navigation }) {
  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" />
      <Text>设置</Text>
      <Button title="Home" onPress={() => navigation.navigate('Home')} />
    </View>
  )
}

其实就只是第二个参数，带过去就可以，而同样接受的地方，也可以从props中把route解构出来，直接去使用。

import { View, Text, Button, StatusBar } from 'react-native'
import styles from './styles'
export default function Home({ navigation， route }) {
  const { title } = route.params;
  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" />
      <Text>首页</Text>
      <Button title="Settings" onPress={() => navigation.navigate('Settings')} />
    </View>
  )
}

那么我们如果有时候要配置navigation header那,就需要再配置下option。

import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { Button } from 'react-native'
import Home from './src/pages/Home'
import Settings from './src/pages/Settings'
const Stack = createNativeStackNavigator()
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen
          name="Settings"
          component={Settings}
          options={route => ({
            headerRight: () => <Button title="test" />,
          })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}      

最后我们来试一下，tabbar和drawer。需要先下载npm依赖和expo依赖

yarn add @react-navigation/bottom-tabs @react-navigation/drawer

expo install react-native-gesture-handler react-native-reanimated

然后再babel.config.js里，加入插件配置。

module.exports = function (api) {
   api.cache(true);

    return {

    presets: ["babel-preset-expo"],

    plugins: ["react-native-reanimated/plugin"],

    };

};

此时我们的App.js文件是这样的

import { NavigationContainer } from '@react-navigation/native'
import { createDrawerNavigator } from '@react-navigation/drawer'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { Platform } from 'react-native'
import Home from './Home'
import News from './News'
import Settings from './Settings'
const Tab = createBottomTabNavigator()
const Drawer = createDrawerNavigator()
export default function App() {
  return (
    <NavigationContainer>
      {Platform.OS === 'ios' && (
        <Tab.Navigator>
                  <Tab.Screen name="Home" component={Home} />
          <Tab.Screen name="News" component={News} />
          <Tab.Screen name="Settings" component={Settings} />
        </Tab.Navigator>
      )}
      {Platform.OS == 'android' && (
        <Drawer.Navigator>
          <Drawer.Screen name="Home" component={Home} />
          <Drawer.Screen name="News" component={News} />
          <Drawer.Screen name="Settings" component={Settings} />
        </Drawer.Navigator>
      )}
    </NavigationContainer>
  )
}

你使用的现在是tabbar和drwaer的导航了，而不是由createNativeStack创建的。然后其中的Platform是用来区别安卓ios的。Home

import React from 'react'

import { View, Text } from 'react-native'

import styles from './styles'

export default function Home() {
  return (
      <View style={styles.container}>
      <Text>Home Content</Text>
    </View>
  )
}

ios

安卓

3、结束

这一节主要讲一下RN入门的脚手架学习，和关于路由导航，比较简单一点，em如果大家有问题，或者想学点更深入的东西直接看沸点加我就好，免费课就是为了让大家学懂跨端框架。欢迎加入群聊，我们一起讨论一些更有趣的技术、商业、闲聊。