undefined ist kein Objekt (Bewertung 'state.cameraType')

Question

Ich versuche, eine React Native App nach this Post und dann über ES6 portiert zu bekommen. Hier ist der Haupt-Seite Code:

"use strict"; 
import React, { Component } from 'react'; 
import Camera from 'react-native-camera'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TextInput, 
    TouchableHighlight, 
} from 'react-native'; 

export default class AwesomeProject extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {cameraType: Camera.constants.Type.back}; 
    } 

    render() { 
    return (
     <Camera 
     ref="cam" 
     style={styles.container} 
     type={this.state.cameraType}> 
     <View style={styles.buttonBar}> 
      <TouchableHighlight style={styles.button} onPress={this._switchCamera.bind(this)}> 
      <Text style={styles.buttonText}>Flip</Text> 
      </TouchableHighlight> 
      <TouchableHighlight style={styles.button} onPress={this._takePicture.bind(this)}> 
      <Text style={styles.buttonText}>Take</Text> 
      </TouchableHighlight> 
     </View> 
     </Camera> 
    ); 
    } 

    _switchCamera:() => { 
    var state = this.state; 
    console.log(this.state); 
    state.cameraType = state.cameraType === Camera.constants.Type.back ? Camera.constants.Type.front : Camera.constants.Type.back; 
    this.setState(state); 
    } 

    _takePicture:() => { 
    console.log(this.refs); 
    this.refs.cam.capture(function(err, data) { 
     console.log(err, data); 
    }); 
    } 

}; 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: "center", 
    alignItems: "center", 
    backgroundColor: "transparent", 
    }, 
    buttonBar: { 
    flexDirection: "row", 
    position: "absolute", 
    bottom: 25, 
    right: 0, 
    left: 0, 
    justifyContent: "center" 
    }, 
    button: { 
    padding: 10, 
    color: "#FFFFFF", 
    borderWidth: 1, 
    borderColor: "#FFFFFF", 
    margin: 5 
    }, 
    buttonText: { 
    color: "#FFFFFF" 
    } 
}); 

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

Ich bin einen seltsamen Fehler immer sagte beiden state.cameraType nicht definiert ist und this.refs ist nicht definiert. Ich habe eine Ahnung, dass etwas nicht gebunden wird und meine this zeigt nicht auf die richtige Sache, aber ich habe versucht, beide Pfeil-Funktionen und explizit verbindlich. Siehe Kommentar unten. Wie auch immer, ich bin mir nicht sicher, warum es so spielt, irgendwelche Ideen?

Sehr ähnlich zu this post außer ich habe versucht beide vorgeschlagenen Lösungen, so dass ich fühle, wie etwas anderes fehlt oder ich mache die Bindung falsch.

edit: Gibt es Grund, downvoted zu werden? Bin ich nicht klar auf etwas: o

Answer 1

Es stellt sich heraus, manuelle Bindung ist der Weg zu gehen, nur benötigt, um die App neu zu laden. Ich habe kein Hot-Swapping aktiviert. Alternativ sollten auch Pfeilfunktionen funktionieren.

Eine andere Sache, darauf hinzuweisen, für iOS 10 und höher, werden Sie 2 Dinge in der Info.plist Datei definieren, Privacy - Camera Usage Description und Privacy - Photo Library Usage. Es kann ein beliebiger Zeichenfolgenwert sein.