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.json

export 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>
            <TextInput
              style={{
                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.json

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
              <Text style={styles.paragraph}>
                Formik表单在React Native中
              </Text>
              <Formik
                  initialValues={{ firstName: '' }}
                  onSubmit={values => console.log(values)}>
                  {({ handleChange, handleSubmit, values }) => (
                      <View>
                        <TextInput
                            style={{
                                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.