Formik官方應(yīng)用案例解析（ 五）React Native

Hello React Native

在創(chuàng)建一個入門的Hello React Native工程時遇到一些麻煩，主要原因是Xcode版本太低。

使用create-react-native-app快速創(chuàng)建React Native框架

開發(fā)React相關(guān)項目，我使用的是Webstorm 2017.2版本。通過網(wǎng)絡(luò)引見，我相當(dāng)然地使用了create-react-native-app這個模板庫在Webstorm中創(chuàng)建初始React Native工程。但是，根據(jù)網(wǎng)站上指示（如下所示）：

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

運行項目時出現(xiàn)看似基本的語法錯誤（沒有留下截圖，請原諒，但是閱讀到最后你就能很容易搞清楚問題的來籠去脈）。根據(jù)網(wǎng)絡(luò)搜索建議，需要升級Xcode（這也是使用最新版本的React Native的麻煩，我使用的是React Native 0.56.0）。

升級Os和Xcode

此前，我的Xcode版本是7.2，但是先后下載了兩個Xcode（.xip格式壓縮文件），在解壓時都出現(xiàn)如下圖所示錯誤：

根據(jù)網(wǎng)絡(luò)再搜索的結(jié)果，這是由于Mac OS版本不匹配緣故。在再三肯定可能性的情況下，我決定一起把Mac OS一起升級。結(jié)果是：大約耗費近1個小時先把OS升級到10.13.6，如下圖所示：

再解壓安裝Xcode_9.4.1.xip，共耗時約3個小時，總算把基礎(chǔ)設(shè)施搞定了。

成功運行React Native應(yīng)用

現(xiàn)在，再次根據(jù)上面步驟提示（略微修改了一個app.js）運行，命令如下（在Webstorm內(nèi)置Terminal終端下）：

react-native run-ios

成功運行于ios模擬器與iPhone 5s真機上。

Formik表單應(yīng)用于React Native環(huán)境

首先需要注意的是，官方提供的有關(guān)示例代碼略有一點問題，如下：

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';

原項目中有關(guān)庫（不只這個示例項目）沒有一起提供，需要讀者根據(jù)需要自行下載安裝。
這兩個庫我都沒有使用，直接注釋掉，把第一個Constants相關(guān)的數(shù)據(jù)直接修改為一個常數(shù)（為簡化）。

使用create-react-native-app創(chuàng)建工程框架

仍然使用上面的create-react-native-app工具在Webstorm中生成工程框架。然后，把上面代碼插入到當(dāng)前工程代碼中。注意到，整個源碼基本沒有動，如下：

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',
    },
});

結(jié)果快照

在Webstorm內(nèi)置Terminal命令行下運行命令react-native run-ios，結(jié)果如下（僅提供模擬器截圖）：

盡管形象不咋地，但基本思路就這樣了。

小結(jié)

第一，使用開源庫開發(fā)保持引用庫版本的一致性是首先要考慮和必須考慮的問題。第二，使用React Native開發(fā)基本類型應(yīng)用非常容易（前提是已經(jīng)掌握了React有關(guān)開發(fā)技術(shù)）。無論本文上面提供的哪一種運行方式看起來都要求安裝相應(yīng)版本的Xcode。不過，create-react-native-app官方提到：

Make sure you have Node v6 or later installed. No Xcode or Android Studio installation is required.

當(dāng)時，我運行上面命令“react-native run-ios”時，觀察命令行提示內(nèi)容是先搜索Xcode工程文件，然后再進(jìn)行編譯及打包等操作的。而當(dāng)我把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.