Versuche, eine alte reactive native Datei auf 0.30

Question

zu aktualisieren Ich habe reactive-native 0.30 installiert und ich habe Probleme, ein altes Stück Code zu aktualisieren und auszuführen, die ich im Internet gefunden habe. Hier

ist der alte rn Code:

"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); 

Und hier ist das, was ich habe, sie aktualisieren getan:

/** 
* 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); 

Aber ich habe die folgende Fehlermeldung auf dem Bildschirm meines ios-simulator wenn Ich drücke Cmd + R:

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

Könnten Sie mir bitte sagen, wo ich falsch liege?
Übrigens ist es besser für diese Art von Skript, Javascript oder ES6 einfach zu verwenden? Vielen Dank!

Answer 1

Sie haben nur einen Fehler in der Methode saveData bei der Verwendung von "Return" auf eine Weise, die nicht zulässig ist.

Ihr Code:

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

Sie nicht "Rückkehr" hier verwendet werden kann, wenn zwei Leer Methoden aufrufen. Ändern Sie es einfach so:

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