React Native环境搭建与开发基础教程

Question

环境搭建步骤

首先，确保系统已安装必要的工具。以下是详细的安装指南：

1. 安装Homebrew

通过终端运行命令安装Homebrew。安装完成后，执行brew -v查看版本号以确认安装成功。

2. 安装Node.js

推荐使用nvm管理Node.js版本，以便灵活切换。安装nvm后，在根目录下创建.bashrc或.bash_profile文件，并添加以下环境变量：

export NVM_DIR="/Users/cbf/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
export ANDROID_HOME=~/Library/Android/sdk

接着进入.nvm文件夹执行./install.sh完成安装，并通过nvm -v验证。随后安装Node.js：运行nvm install node && nvm alias default node，安装后使用node命令检查是否成功。

3. 安装watchman

在命令行中输入brew install watchman进行安装。watchman有助于避免Node.js在文件系统监视时可能出现的BUG。

4. 安装flow

如需为JavaScript代码添加类型检查，可以通过brew install flow安装flow。

5. OS开发环境准备

确保系统为OS X 10.10.5或更高版本，并安装Xcode 7及以上版本。

快速开始React Native项目

由于网络原因，建议将npm仓库源替换为国内镜像以加速。在终端中执行以下命令安装React Native命令行工具：

npm install -g react-native-cli

初始化新项目：

react-native init AwesomeProject

若下载缓慢，可考虑使用预配置的项目模板以节省时间。

运行iOS应用

进入项目目录：cd AwesomeProject，用Xcode打开ios/AwesomeProject.xcodeproj并点击Run按钮。编辑index.ios.js文件后，在iOS模拟器中按⌘-R刷新应用查看更改。

运行Android应用

同样进入项目目录，运行react-native run-android启动应用。编辑index.android.js文件后，在模拟器中按Menu键（通常为F2或⌘+M）选择“Reload JS”以应用更新。通过adb logcat *:S ReactNative:V ReactNativeJS:V可查看应用日志。

Windows环境搭建可参考其他专门教程。

React Native开发基础

Flexbox布局

Flexbox是CSS3引入的弹性盒子模型，用于适应不同屏幕宽度的布局。在React Native中，它解决了浮动布局、屏幕适配和空间分配等问题。

容器属性包括：

flexDirection：定义主轴方向，可选row、row-reverse、column、column-reverse。
flexWrap：控制换行，可选wrap、nowrap、wrap-reverse。
alignItems：设置项目在交叉轴上的对齐方式，如flex-start、flex-end、center、stretch。
justifyContent：定义项目在主轴上的对齐方式，如flex-start、flex-end、center、space-between、space-around。

元素属性包括：

flex：类似权重，指定项目的伸缩比例。
alignSelf：允许单个项目有独特的对齐方式。
简写属性flex-flow可同时设置flexDirection和flexWrap。

JavaScript语法基础

React Native中常使用ES6箭头函数简化代码。例如，过滤数组的传统写法：

var selected = allJobs.filter(function (job) {
  return job.isSelected();
});

可简化为：

var selected = allJobs.filter(job => job.isSelected());

组件生命周期

React Native组件的生命周期分为三个阶段：初始化、运行与交互、卸载消亡。在render()方法中定义UI，状态由state控制。调用setState()时，React会自动更新相关部分。例如，按钮状态切换可通过以下代码实现：

{this.state.buttonClicked ? 'Hello World' : 'Goodbye World'}
this.setState({buttonClicked: !this.state.buttonClicked});

生命周期管理有助于处理组件加载、用户交互和清理工作，确保应用高效运行。

编写第一个React Native Demo

通过上述环境设置和基础知识，可以开始构建简单应用。实践中，结合flexbox布局和状态管理，逐步实现交互功能。

实际应用与学习参考

React Native适用于跨平台移动开发，建议通过官方文档和社区资源深入学习，以掌握更高级的特性和最佳实践。