javascript - react-native相机胶卷“null不是对象(评估'this.state.photos')”

因此，我尝试将相机胶卷功能添加到我的相机胶卷演示应用程序中，并且不断收到此错误。 “ null不是对象（评估'this.state.photos'）”
iOS Error Message
请注意：我是一个非常新的开发人员，这是我的第一个React-native应用程序。任何帮助将不胜感激。

以下是我的index.ios.js文件的内容。

//index.ios.js


import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Dimensions,
    View,
    TouchableOpacity,
    Image,
    CameraRoll,
    ScrollView,
    Button,
} from 'react-native';


import Camera from 'react-native-camera';
import { createStackNavigator } from 'react-navigation'

export default class MyCamera extends Component {
    render() {

        return (

            <View style={styles.container}>

                <Camera
                    ref={(cam) => {
                        this.camera = cam;
                    }}
                    style={styles.preview}
                    aspect={Camera.constants.Aspect.fill}>

                    <TouchableOpacity style={styles.button} onPress={this.takePicture.bind(this)}>
                        <Image source={require("./resources/images/shutter_button.png")}/>
                    </TouchableOpacity>

                </Camera>

                <Button title="Load Images" onPress={this._handleButtonPress}/>


                {this.state.photos.map((p, i) => {
                    <Image
                        key={i}
                        style={{
                            width: 300,
                            height: 100,
                        }}
                        source={{uri: p.node.image.uri}}
                    /> // Closing IMG Tag

                })}

            </View>
        ); //Closing Return
    } //Closing Render

    takePicture() {
        this.camera.capture()
            .then((data) => console.log(data))
            .catch(err => console.error(err));
    }// Closing takePicture

    _handleButtonPress = () => {
        CameraRoll.getPhotos({
            first: 20,
            assetType: 'Photos',
        })
            .then(r => {
                this.setState({photos: r.edges});
            })
            .catch((err) => {
                //Error Loading Images
            });
    }; //Closing handleButtonPress

};// Closing MyCamera

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width
    },
    capture: {
        flex: 0,
        backgroundColor: '#fff',
        borderRadius: 10,
        color: '#000',
        paddingRight: 20,
        margin: 40
    }
});

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

最佳答案

在MyCameraClass'中，您应该添加

  constructor(){
  super();

  this.state={
    photos: []
  }

}

渲染之前