尝试将旧的 React 本机文件更新为 0.30

Question

我已经安装了 react-native 0.30，但我无法更新和执行我在互联网上找到的一段旧代码。

这是旧的 rn 代码：

"use strict";

var React = require("react-native");

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput,
    AsyncStorage,
} = React;

var ReactProject = React.createClass({

    componentDidMount: function() {
        AsyncStorage.getItem("myKey").then((value) => {
            this.setState({"myKey": value});
        }).done();
    },

    getInitialState: function() {
        return { };
    },

    render: function() {
        return (
            <View style={styles.container}>
                <Text style={styles.saved}>
                    {this.state.myKey}
                </Text>
                <View>
                    <TextInput
                        style={styles.formInput}
                        onChangeText={(text) => this.saveData(text)}
                        value="" />
                </View>
                <Text style={styles.instructions}>
                    Type something into the text box.  It will be saved to
                    device storage.  Next time you open the application, the saved data
                    will still exist.
                </Text>
            </View>
        );
    },

    saveData: function(value) {
        AsyncStorage.setItem("myKey", value);
        this.setState({"myKey": value});
    }

});

var styles = StyleSheet.create({
    container: {
        padding: 30,
        flex: 1,
        justifyContent: "center",
        alignItems: "stretch",
        backgroundColor: "#F5FCFF",
    },
    formInput: {
        flex: 1,
        height: 26,
        fontSize: 13,
        borderWidth: 1,
        borderColor: "#555555",
    },
    saved: {
        fontSize: 20,
        textAlign: "center",
        margin: 10,
    },
    instructions: {
        textAlign: "center",
        color: "#333333",
        marginBottom: 5,
        marginTop: 5,
    },
});

AppRegistry.registerComponent('ReactProject', () => ReactProject);

下面是我所做的更新：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
"use strict";

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  AsyncStorage,
  View
} from 'react-native';

class pulps extends Component {

  componentDidMount() {
      AsyncStorage.getItem("myKey").then((value) => {
          this.setState({"myKey": value});
      }).done();
  }

  getInitialState() {
    return { };
  }

  render() {
    return (
            <View style={styles.container}>
                <Text style={styles.saved}>
                    {this.state.myKey}
                </Text>
                <View>
                    <TextInput
                        style={styles.formInput}
                        onChangeText={(text) => this.saveData(text)}
                        value="" />
                </View>
                <Text style={styles.instructions}>
                    Type something into the text box.  It will be saved to
                    device storage.  Next time you open the application, the saved data
                    will still exist.
                </Text>
            </View>
    );
  }

  saveData(value) {
        return (
        AsyncStorage.setItem("myKey", value);
        this.setState({"myKey": value});
        );
    }
}

var styles = StyleSheet.create({
    container: {
        padding: 30,
        flex: 1,
        justifyContent: "center",
        alignItems: "stretch",
        backgroundColor: "#F5FCFF",
    },
    formInput: {
        flex: 1,
        height: 26,
        fontSize: 13,
        borderWidth: 1,
        borderColor: "#555555",
    },
    saved: {
        fontSize: 20,
        textAlign: "center",
        margin: 10,
    },
    instructions: {
        textAlign: "center",
        color: "#333333",
        marginBottom: 5,
        marginTop: 5,
    },
});

AppRegistry.registerComponent('pulps', () => pulps);

但是当我按下 cmd+R 时，ios-simulator 的屏幕上出现以下错误：

SyntaxError /Users/***/Documents/pulps/index.ios.js: Unexpected token(53:44)

你能告诉我哪里错了吗？
顺便问一下，那种脚本使用纯 Javascript 还是 ES6 更好？谢谢！

Answer 1

您只是在以不允许的方式使用 "return" 时在方法 saveData 中出错。

您的代码：

  saveData(value) {
        return (
        AsyncStorage.setItem("myKey", value);
        this.setState({"myKey": value});
        );
    }

这里调用两个void方法时不能使用"return"。像这样改变它：

  saveData(value) {
      AsyncStorage.setItem("myKey", value);
      this.setState({"myKey": value});
  }

尝试将旧的 React 本机文件更新为 0.30

Trying to update an old react native file to 0.30

javascript

syntax-error

ios

react-native