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.