React-native脚手架探索

溪饱鱼

于 2025-05-12 01:52:27 发布

阅读量738

点赞数 37

分类专栏： React-native 文章标签： react native 前端 typescript

本文链接：https://blog.csdn.net/xibaoyu2025a/article/details/147884106

版权

React-native 专栏收录该内容

1 篇文章

订阅专栏

本文总结

本文主要探讨了 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> ) }

接下来我们看一下如何传参，如下


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> ) }

其实就只是第二个参数，带过去就可以，而同样接受的地方，也可以从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文件是这样的

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