尝试使用React Native制作iOS应用（第一部分，环境设置）

2 年 ago
清, 宇
2 minutes

首先

因为想要兼顾学习React，所以我决定尝试制作iOS应用，并记录下来。平常我主要使用C++/C#进行开发，所以对于React和iOS应用来说，我是一个初学者，可能存在许多不足之处，还请多多包涵。

试用了以下链接中的React-Native（官方）的介绍，内容几乎相同。

明天，计划追加以下内容：
使用React-Native制作iOS应用（第2部分，页面切换）
使用React-Native制作iOS应用（第3部分，使用C++创建模块）

为什么选择React-Native？

在考虑要开发应用程序的阶段，我随便搜索了一下，想使用跨平台开发框架来开发Android和iOS应用。我考虑了C#(.NET MAUI)、React-Native和Vue-Native作为候选项。
然而，基于以下原因，我决定试用React-Native。

    1. 在mac环境下安装Visual Studio很麻烦。

 

    1. 据说Vue Native已经被废弃，不再维护。

 

    1. Vue Native（官方网站）

⚠️ Vue Native已被废弃，不再维护。

有关开发环境

大致上是这样的。

user@macbook ~ % sw_vers 
ProductName:	macOS
ProductVersion:	11.7.9
BuildVersion:	20G1426
user@macbook ~ % node -v  
v18.13.0
user@macbook ~ % npm -v
9.8.1

建立环境

根据设置开发环境的指南，我们需要安装Node、watchman和CocoaPods。
（由于Xcode已经安装，所以不再重复，react-native似乎会在使用npx创建项目时自动安装）。

你将需要 Node、Watchman、React Native命令行界面、Xcode和CocoaPods。

brew install node
brew install watchman

# なんかこれだけactivesupportのインストールとかやらないと入らなかった。
gem install cocoapods

创建项目

# プロジェクトの作成は以下のコマンドを実行
npx react-native@latest init AwesomeProject

# react-native-cliがあると作成に失敗するらしいので、インストールされてたら消しておくこと
npm uninstall -g react-native-cli @react-native-community/cli

# 作成できていれば、こんな感じでフォルダやファイルが作成される
user@macbook AwesomeProject % tree ./ -L 1
./
├── App.tsx
├── Gemfile
├── Gemfile.lock
├── README.md
├── __tests__
├── android
├── app.json
├── babel.config.js
├── index.js
├── ios
├── jest.config.js
├── metro.config.js
├── node_modules
├── package.json
├── tsconfig.json
├── vendor
└── yarn.lock

7 directories, 12 files

在iOS应用中安装依赖关系的包

据说CocoaPods可以管理iOS应用程序的依赖关系。
当通过npm等方式添加包时，它也可以通过pod的install/update命令将依赖的包添加进来。

# iosディレクトリで以下を実行する。
bundle install
bundle exec pod install

执行应用程序

# シミュレータが立ち上がっていればコマンドじゃなくてもOK
open -a Simulator

# シミュレータでアプリが実行される。(初回はビルドに結構時間がかかる)
npm start
npm start ios

暂时先打个HelloWorld试试看

总之，问候是重要的对吧？虽然App.tsx是默认显示的，但首先我们需要修改index.js以显示HelloWorld。

/**
 * @format
 */

import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet } from 'react-native';
//import App from './App';
import { name as appName } from './app.json';


export class HelloWorldApp extends Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                <Text>Hello, world!</Text>
            </View>
        );
    }
}

AppRegistry.registerComponent(appName, () => HelloWorldApp);

如果出现这种屏幕，就可以了。
参考如下：
【入门】第一次使用 React Native

simulator_screenshot_17B86BCC-A6D9-4312-956B-61B5C1927CB9.png
bannerAds