本文共 4360 字,大约阅读时间需要 14 分钟。
在创建一个入门的Hello React Native工程时遇到一些麻烦,主要原因是Xcode版本太低。
开发React相关项目,我使用的是Webstorm 2017.2版本。通过网络引见,我相当然地使用了create-react-native-app这个模板库在Webstorm中创建初始React Native工程。但是,根据网站上指示(如下所示):
1)To run your app on iOS:
cd /private/var/folders/pm/dqd601mn0nd15jzwtj09vj540000gn/T/1533354621743-0/helloreact-native run-ios运行项目时出现看似基本的语法错误(没有留下截图,请原谅,但是阅读到最后你就能很容易搞清楚问题的来笼去脉)。根据网络搜索建议,需要升级Xcode(这也是使用最新版本的React Native的麻烦,我使用的是React Native 0.56.0)。
此前,我的Xcode版本是7.2,但是先后下载了两个Xcode(.xip格式压缩文件),在解压时都出现如下图所示错误:
根据网络再搜索的结果,这是由于Mac OS版本不匹配缘故。在再三肯定可能性的情况下,我决定一起把Mac OS一起升级。结果是:大约耗费近1个小时先把OS升级到10.13.6,如下图所示:
再解压安装Xcode_9.4.1.xip,共耗时约3个小时,总算把基础设施搞定了。
react-native run-ios
成功运行于ios模拟器与iPhone 5s真机上。
首先需要注意的是,官方提供的有关示例代码略有一点问题,如下:
import React, { Component } from 'react';import { Text, View, StyleSheet, TextInput, Button } from 'react-native';import { Constants } from 'expo';import { Formik } from 'formik';// You can import from local filesimport AssetExample from './components/AssetExample';// or any pure javascript modules available in npmimport { Card } from 'react-native-elements'; // Version can be specified in package.jsonexport default class App extends Component { render() { return (); }}const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', // justifyContent: 'center', paddingTop: Constants.statusBarHeight + 100, backgroundColor: '#ecf0f1', }, paragraph: { margin: 24, fontSize: 18, fontWeight: 'bold', textAlign: 'center', color: '#34495e', },}); Formik x React Native console.log(values)}> {({ handleChange, handleSubmit, values }) => ( )}
主要是如下两个引用:
import { Constants } from 'expo';import { Card } from 'react-native-elements';原项目中有关库(不只这个示例项目)没有一起提供,需要读者根据需要自行下载安装。
这两个库我都没有使用,直接注释掉,把第一个Constants相关的数据直接修改为一个常数(为简化)。仍然使用上面的create-react-native-app工具在Webstorm中生成工程框架。然后,把上面代码插入到当前工程代码中。注意到,整个源码基本没有动,如下:
import React, { Component } from 'react';import { Text, View, StyleSheet, TextInput, Button } from 'react-native';// import { Constants } from 'expo';import { Formik } from 'formik';// You can import from local filesimport AssetExample from './components/AssetExample';// or any pure javascript modules available in npm// import { Card } from 'react-native-elements'; // Version can be specified in package.jsonexport default class App extends Component { render() { return (); }}const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', // justifyContent: 'center', // paddingTop: Constants.statusBarHeight + 100, paddingTop: 100 + 100, backgroundColor: '#ecf0f1', }, paragraph: { margin: 24, fontSize: 18, fontWeight: 'bold', textAlign: 'center', color: '#34495e', },}); Formik表单在React Native中 console.log(values)}> {({ handleChange, handleSubmit, values }) => ( )}
在Webstorm内置Terminal命令行下运行命令react-native run-ios,结果如下(仅提供模拟器截图):
尽管形象不咋地,但基本思路就这样了。
第一,使用开源库开发保持引用库版本的一致性是首先要考虑和必须考虑的问题。第二,使用React Native开发基本类型应用非常容易(前提是已经掌握了React有关开发技术)。无论本文上面提供的哪一种运行方式看起来都要求安装相应版本的Xcode。不过,create-react-native-app官方提到:
Make sure you have Node v6 or later installed. No Xcode or Android Studio installation is required.
当时,我运行上面命令“react-native run-ios”时,观察命令行提示内容是先搜索Xcode工程文件,然后再进行编译及打包等操作的。而当我把Xcode.app不放置在Applications路径下,react-native run-ios命令运行是失败的。
时间所限,Android版本没有提供,我会在以后文章中介绍。
1.
2.3.4.转载地址:http://myzix.baihongyu.com/