Formik官方应用案例解析( 五)React Native
Hello React Native
在创建一个入门的Hello React Native工程时遇到一些麻烦,主要原因是Xcode版本太低。
使用create-react-native-app快速创建React Native框架
开发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/hello
react-native run-ios
- or -
Open ios/hello.xcodeproj in Xcode
Hit the Run button
2)To run your app on Android:
cd /private/var/folders/pm/dqd601mn0nd15jzwtj09vj540000gn/T/1533354621743-0/hello
Have an Android emulator running (quickest way to get started), or a device connected
react-native run-android
运行项目时出现看似基本的语法错误(没有留下截图,请原谅,但是阅读到最后你就能很容易搞清楚问题的来笼去脉)。根据网络搜索建议,需要升级Xcode(这也是使用最新版本的React Native的麻烦,我使用的是React Native 0.56.0)。
升级Os和Xcode
此前,我的Xcode版本是7.2,但是先后下载了两个Xcode(.xip格式压缩文件),在解压时都出现如下图所示错误:
根据网络再搜索的结果,这是由于Mac OS版本不匹配缘故。在再三肯定可能性的情况下,我决定一起把Mac OS一起升级。结果是:大约耗费近1个小时先把OS升级到10.13.6,如下图所示:
再解压安装Xcode_9.4.1.xip,共耗时约3个小时,总算把基础设施搞定了。
成功运行React Native应用
现在,再次根据上面步骤提示(略微修改了一个app.js)运行,命令如下(在Webstorm内置Terminal终端下):
react-native run-ios
成功运行于ios模拟器与iPhone 5s真机上。
Formik表单应用于React Native环境
首先需要注意的是,官方提供的有关示例代码略有一点问题,如下:
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 files
import 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 (<View style={styles.container}><Text style={styles.paragraph}>Formik x React Native</Text><Formik initialValues={{ firstName: '' }} onSubmit={values => console.log(values)}>{({ handleChange, handleSubmit, values }) => (<View><TextInputstyle={{height: 40,borderColor: 'gray',borderWidth: 1,width: 300,padding: 8,fontSize: 18}}onChangeText={handleChange('firstName')}value={values.firstName}/><Button onPress={handleSubmit} title="submit" color="#841584" /></View>)}</Formik></View>);}
}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',},
});
主要是如下两个引用:
import { Constants } from 'expo';
import { Card } from 'react-native-elements';
原项目中有关库(不只这个示例项目)没有一起提供,需要读者根据需要自行下载安装。
这两个库我都没有使用,直接注释掉,把第一个Constants相关的数据直接修改为一个常数(为简化)。
使用create-react-native-app创建工程框架
仍然使用上面的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 files
import 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 (<View style={styles.container}><Text style={styles.paragraph}>Formik表单在React Native中</Text><FormikinitialValues={{ firstName: '' }}onSubmit={values => console.log(values)}>{({ handleChange, handleSubmit, values }) => (<View><TextInputstyle={{height: 40,borderColor: 'gray',borderWidth: 1,width: 300,padding: 8,fontSize: 18}}onChangeText={handleChange('firstName')}value={values.firstName}/><Button onPress={handleSubmit} title="submit" color="#841584" /></View>)}</Formik></View>);}
}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',},
});
结果快照
在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.https://snack.expo.io/Bk9pPK87X
2.https://github.com/react-community/create-react-native-app
3.https://facebook.github.io/react-native/docs/getting-started.html
4.
Formik官方应用案例解析( 五)React Native相关推荐
- React Native官方DEMO
官方给我们提供了UIExplorer项目,这里边包含React Native的基本所有组件的使用介绍和方法. 运行官方DEMO步骤如下 安装react native环境 React Native项目源 ...
- iOS开发者React Native学习路线
2019独角兽企业重金招聘Python工程师标准>>> http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS- ...
- 【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件解说(13)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50599951 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...
- 庖丁解牛!深入剖析React Native下一代架构重构
Facebook在2018年6月官方宣布了大规模重构React Native的计划及重构路线图.目的是为了让React Native更加轻量化.更适应混合开发,接近甚至达到原生的体验.(也有可能是Re ...
- 比较 React Native 与 Vue 和 Capacitor
随着可用移动应用程序开发框架数量的增加,2018 年引入的 Vue Native 使开发人员能够使用 Vue.js 代码创建 React Native 移动应用程序. 然而,Vue Native 团队 ...
- React Native专题
未经授权不得转载: 出处地址:http://www.lcode.org 本文出自:[江清清的技术专栏] 本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入 ...
- React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
- React Native专题-江
(一).基本介绍: 江博客http://blog.csdn.net/jiangqq781931404/article/category/6055594 React Native For Android ...
- React Native开发(一)
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac ...
最新文章
- 伍六七带你学算法——栈的使用
- 人工智能其实并不客观,算法会加剧刻板印象
- 搬家到新地址:http://kittsoft.xp3.biz/,欢迎访问!
- React开发(281):一定是路由错误
- wince投屏苹果手机_怎么把手机上的导航映射到中控屏
- 随便聊聊,Linux 中的环境变量
- aix shell脚本 运行java_Linux中执行shell脚本的4种方法总结
- hbase插入数据语句_记一次 spark thriftserver 插入数据到hbase 的异常
- tushare学习文档_介绍一个python股票分析包tushare——韭菜的自我修养
- linux 命令安装 wine,如何在Ubuntu 18.04 LTS上安装Wine
- MySQL锁 、行锁、表锁、间隙锁、临键锁、共享锁、排它锁、意向锁
- 白帽飞客从入门到放肆
- 机器人仿真软件 V-REP学习记录(序言)
- 机器学习一【决策树】
- Android基础整合项目之节日群发助手(三)
- java 美发管理系统_美容美发管理系统毕业论文.doc
- Python与数学——使用Processing绘制高次方程图像
- 云架构Linux运维,【Linux云计算架构:第三阶段-Linux高级运维...
- 基于spec评论作品
- java web JSP实用教程第二章
热门文章
- pythonweb开发-Python Web开发从入门到精通
- python编程入门与案例详解pdf-Python入门之三角函数sin()函数实例详解
- python语言入门m-Python -m参数原理及使用方法解析
- python培训班价格-成都Python课程
- UVa11134 Fabled Rooks(贪心算法)
- ubuntu17.04下mysql5.7.18源码安装
- LeetCode K-diff Pairs in an Array
- mysql中表名为关键字的处理方法
- 网络编程(原始套接字)
- 网络编程学习笔记(批量输入)