React Native (RN)的学习上手教程

什么是 React Native?

React Native 是由 Facebook 开发的开源框架,允许开发者使用 JavaScript 和 React 构建原生移动应用。它的口号是"学习一次,编写任何平台"。

React Native 的优势

  • 跨平台开发:一套代码可以同时运行在 iOS 和 Android 平台
  • 使用 JavaScript:无需学习 Swift、Objective-C 或 Java/Kotlin
  • 热重载:实时查看代码更改效果
  • 社区活跃:大量的第三方库和组件
  • 原生性能:渲染为原生 UI 组件,而非 WebView

环境搭建

  1. 安装 Node.js 和 npm

  2. 安装 React Native CLI

    bash 复制代码
    npm install -g react-native-cli
  3. 安装平台开发环境

    • iOS:需要 macOS、Xcode
    • Android:需要 Android Studio、JDK、Android SDK
  4. 使用 Expo(可选)

    • 对于初学者,可以使用 Expo 工具简化开发流程
    bash 复制代码
    npm install -g expo-cli

React Native 基础概念

组件(Components)

React Native 应用由组件构成,组件可以是:

  • 函数组件:简单的 JavaScript 函数
  • 类组件:继承自 React.Component 的类

状态(State)和属性(Props)

  • Props:从父组件传递给子组件的数据
  • State:组件内部可以改变的数据

样式(Style)

React Native 使用类似 CSS 的样式,但采用驼峰命名法。

创建第一个 RN 应用

使用 React Native CLI:

bash 复制代码
npx react-native init MyFirstApp
cd MyFirstApp
npx react-native run-android  # 或 run-ios

使用 Expo CLI:

bash 复制代码
expo init MyFirstApp
cd MyFirstApp
expo start

基本应用代码:

javascript 复制代码
import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';

const App = () => {
  const [count, setCount] = React.useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>我的第一个 React Native 应用</Text>
      <Text style={styles.counter}>计数器:{count}</Text>
      <Button title="增加" onPress={() => setCount(count + 1)} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  title: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  counter: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 20,
  },
});

export default App;

常用组件

  • View:类似于 div,容器组件
  • Text:文本组件
  • Image:图片组件
  • ScrollView:可滚动的容器
  • FlatList:高性能列表组件
  • TextInput:文本输入框
  • TouchableOpacity:透明度反馈的触摸组件
  • Button:按钮组件

布局

React Native 使用 Flexbox 进行布局:

  • flex:定义组件如何填充可用空间
  • flexDirection:定义子元素的排列方向
  • justifyContent:定义子元素在主轴上的对齐方式
  • alignItems:定义子元素在交叉轴上的对齐方式

学习资源

相关推荐
ZL不懂前端1 小时前
使用 React + Konva 构建交互式立方体绘制工具
react.js·ecmascript 6
NicolasCage1 小时前
Icon图标库推荐
vue.js·react.js·icon
Lazy_zheng4 小时前
React架构深度解析:从 Stack 到 Fiber,解决 CPU 和 I/O 瓶颈问题
前端·react.js·前端框架
sssammmm4 小时前
AI入门学习-模型评估示例讲解
人工智能·学习
淮北4944 小时前
STL学习(四、队列和堆栈)
开发语言·c++·学习
WildBlue4 小时前
React 遇上原子 CSS:前端开发的超级进化 🚀
前端·react.js
namehu4 小时前
“c is not a function” - 一次由 useEffect 异步函数引发的 React 底层崩溃分析
前端·javascript·react.js
落羽的落羽5 小时前
【C++】论如何封装红黑树模拟实现set和map
数据结构·c++·学习
iaku5 小时前
🔥React工程化实践:构建企业级可维护应用架构
前端·react.js·前端框架
PerfumerKarma6 小时前
【WebGPU学习杂记】数学基础拾遗(2)变换矩阵中的齐次坐标推导与几何理解
学习·线性代数·矩阵