Formik官方应用案例解析（五）React Native

最新推荐文章于 2024-09-27 19:18:18 发布

weixin_34191845

最新推荐文章于 2024-09-27 19:18:18 发布

阅读量355

点赞数

文章标签： xcode 移动开发操作系统

本文链接：https://blog.csdn.net/weixin_34191845/article/details/85023055

版权

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格式压缩文件），在解压时都出现如下图所示错误：

Formik官方应用案例解析（五）React Native

根据网络再搜索的结果，这是由于Mac OS版本不匹配缘故。在再三肯定可能性的情况下，我决定一起把Mac OS一起升级。结果是：大约耗费近1个小时先把OS升级到10.13.6，如下图所示：
Formik官方应用案例解析（五）React Native

再解压安装Xcode_9.4.1.xip，共耗时约3个小时，总算把基础设施搞定了。

成功运行React Native应用

Formik官方应用案例解析（五）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，结果如下（仅提供模拟器截图）：

Formik官方应用案例解析（五）React Native

尽管形象不咋地，但基本思路就这样了。

小结

第一，使用开源库开发保持引用库版本的一致性是首先要考虑和必须考虑的问题。第二，使用React Native开发基本类型应用非常容易（前提是已经掌握了React有关开发技术）。无论本文上面提供的哪一种运行方式看起来都要求安装相应版本的Xcode。不过，create-react-native-app官方提到：