无法读取未定义的属性0

时间：2018-09-20 22:28:52

标签： arrays react-native

我竭尽全力解决此问题，但仍然感到困惑。尝试传递具有照片作为第一个（0）索引的数组gallery []时出现“无法读取未定义的属性0”错误。

当我进行console.log记录时，我已经验证了数组库确实存在并且格式正确。但是，我不确定为什么会返回2个控制台语句，其中第一个是未定义的，而第二个是正确的。

有关详细信息，请参见下面的代码段和屏幕截图。非常感谢您的帮助，因为我完全迷路了。这是延迟完成我的应用程序开发的唯一方面。谢谢

 <Text style={styles.sectionHeader}> Photo Galery</Text>
          <View >
            {console.log(gallery)}
         {  

                <TouchableOpacity  >
                    <Image 
                        source={gallery[0].photos}
                        style={styles.navImageStyle}
                    />
                </TouchableOpacity>

        }

这是定义了正确图库对象的屏幕截图。我尝试了各种方法在我的图片标签中引用它（即使使用source = {{{uri：gallery [0] .photos}}}，但没有运气。

gallery object logged to the console

当我使用source = {gallery}修改图片标签时，即使我知道语法不完整，也没有任何图片显示。参见下图。

screen missing images under Photo Gallery Heading

---以下每个请求的详细信息----- Gallery数组来自通过以下代码导入的本地数据数组（placesData）。然后，代码会在按下按钮时在模式窗口（SiteDetails）中将Gallery作为道具导入

import React, { Component } from 'react';
import { View, FlatList } from 'react-native';
import { ListItem, } from 'native-base';

import { placesData } from '../../data/placesData';
import Places from '../../data/Places';
import SiteDetails from '../SiteDetails';

export default class NavPlaces extends Component {
  constructor(props) {
    super(props);
    this.state = {
        setModalVisible: false,
        modalArticleData: {},
        error: null
    };
  }


_handleItemDataOnPress = articleData => {
  this.setState({
    setModalVisible: true,
    modalArticleData: articleData
  });
};

_handleModalClose = () => {
  this.setState({
    setModalVisible: false,
    modalArticleData: {}
  });
};

  render() {
    return (
        <View>
          <FlatList
              data={placesData}
              renderItem={({ item }) => (
                  <ListItem style={{ marginLeft: 5,}}>
                      <Places  onPress={this._handleItemDataOnPress} data={item} />               
                  </ListItem>
              )}
              horizontal={true}
              keyExtractor={item => item.id}
          />
          <SiteDetails
            showModal={this.state.setModalVisible}
            articleData={this.state.modalArticleData}
            onClose={this._handleModalClose}
          />
        </View>
    );
  }
}

SiteDetails 

import React, { Component } from "react";
import Icon from "react-native-vector-icons/FontAwesome";

import {
  FlatList,
  Dimensions,
  Modal,
  ScrollView,
  Share,
  TouchableOpacity, Image, Text, View,
} from "react-native";

import {
  Grid, Row, Col,
  Header,
  ListItem,
  Content,
  Container,
  Body,
  Left,
  Right,
  Title,
} from "native-base";
// import PlacePhoto from '../data/PlacePhoto';
// import NavGallery from "./Tabs/NavGallery";
// import {placesData} from '../data/placesData'

const webViewHeight = Dimensions.get("window").height - 56;
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;

export default class SiteDetails extends Component {
  constructor(props) {
    super(props);
    this.data = props.data;
}

  _handleClose = () => {
    return this.props.onClose();
  };

  _handleShare = (clickedLink, clickedTitle) => {
    // const { link,title } = this.props.data;
    message = `${clickedTitle}\n\nRead more @\n${clickedLink.toString()}\n\nshared via MSU mobile`;
    return Share.share(
      { clickedTitle, message, url: message },
      { dialogTitle: `Share ${clickedTitle}` }
    );
  };

  render() {
    const { showModal, articleData } = this.props;
    const { image, title, subTitle, description,location, phone, credit, gallery } = articleData;

    // if (image !== undefined) {
      return (
        <Modal
          onRequestClose={this._handleClose}
          visible={showModal}
          transparent
          animationType="slide"
        >
          <Container
            style={{ margin: 0, marginBottom: 0, backgroundColor: "#ffffff" }}
          >
            <Content contentContainerStyle={{ height: webViewHeight }}>
              <Header
                style={{ backgroundColor: "#1b4383" }}
                iosBarStyle="light-content"
              >
                <Left>
                  <TouchableOpacity onPress={() => this._handleClose()}>
                    <Icon
                      name="close"
                      style={{ fontSize: 25, color: "#f47937", paddingHorizontal: 10, }}
                    />
                  </TouchableOpacity>
                </Left>
                <Body>
                  <Title
                    children={title}
                    style={{ color: "#ffffff" }}
                  />
                </Body>
                <Right>
                  <TouchableOpacity
                    // onPress={() =>
                    //   this._handleShare(articleData.link, articleData.title)
                    // }
                  >
                    <Icon
                      name="share-alt"
                      style={{ fontSize: 30, color: "#f47937", paddingHorizontal: 10, }}
                    />
                  </TouchableOpacity>
                </Right>
              </Header>

              <ScrollView>
                  <Image 
                    source={image}
                    style={styles.drawerCover}
                  />

              <View style={{backgroundColor: 'black',  }}>
                  <Text style={styles.titleText}>{title}</Text>
                  <View style={{ height: 16 }}/>
                  <Text style={styles.subTitleText}>{subTitle}</Text>
                  <View style={{ height: 16 }}/>

                  <Grid>
                  <Row>
                      <Col style={{ flexDirection: 'row'}}>
                        <Icon 
                          name='map-o'
                          style={styles.iconStyle}
                        />
                        <Text style={styles.subText}>location:</Text>
                      </Col>
                      <Col>
                        <Text style={styles.subText}>{location}</Text>
                      </Col>
                    </Row>
                    <View style={{ height: 16 }}/>
                    <Row>
                      <Col style={{ flexDirection: 'row'}}>
                        <Icon 
                          name='phone'
                          style={styles.iconStyle}
                        />
                        <Text style={styles.subText}>tel:</Text>
                      </Col>
                      <Col>
                        <Text style={styles.subText}>{phone}</Text>
                      </Col>
                    </Row>
                    <View style={{ height: 16 }}/>
                    <Row>
                      <Col style={{ flexDirection: 'row'}}>
                        <Icon 
                          name='globe'
                          style={styles.iconStyle}
                        />
                        <Text style={styles.subText}>Website:</Text>
                      </Col>
                      <Col>
                        <Text style={styles.subText}></Text>
                      </Col>
                      </Row>
                      <View style={{ height: 16 }}/>
                    <Row>
                      <Col style={{ flexDirection: 'row'}}>
                        <Icon 
                          name='pencil'
                          // name='creative-commons'
                          style={styles.iconStyle}
                        />
                        <Text style={styles.subText}>Credit:</Text>
                      </Col>
                      <View style={{ height: 16 }}/>
                      <Col>
                        <Text style={styles.subText}>{credit}</Text>
                      </Col>
                      </Row>

                  </Grid>
              </View>
              <Text style={styles.sectionHeader}> Photo Galery</Text>
              <View >
                {console.log(gallery)}
             {  

                    <TouchableOpacity  >
                        <Image 
                            source={gallery}
                            style={styles.navImageStyle}
                        />
                    </TouchableOpacity>

            }


              <Text style={styles.sectionHeader}> Description </Text>
              <Text style={styles.bodyText}> {description} </Text>
              </View>

              </ScrollView>
            </Content>
          </Container>
        </Modal>
      );
    // } else {
    //   return null;
    // }
  }
}

placesData数组：

export const placesData =

[     {         id：“ a”，         图片：require（'../../ assets / img / places / museum / slave / slavePic.jpg'），         标题：“奴隶贸易博物馆”，         子标题：“历史和教育中许多稀有的宝石之一”，         位置：“巴达哥里，拉各斯”，         电话： ''，         信用：“弗里曼研究所”，         画廊：[             {                 键：“ v1”，                 相片： [                       require（'../../ assets / img / places / museum / slave / abolitionCannon.jpg'），                       require（'../../ assets / img / places / museum / slave / holdingCell.jpg'），                       require（'../../ assets / img / places / museum / slave / slaveMarket.jpg'），                       require（'../../ assets / img / places / museum / slave / slaveNoReturn.jpg'），                       require（'../../ assets / img / places / museum / slave / bibleAtBadagry.jpg'），                       require（'../../ assets / img / places / museum / slave / bridge.jpg'），                 ]
            }         ]，         描述：“弗里曼研究所摘录”，

},
{
    id: 'b',
    image: require('../../assets/img/places/parks/yankari.png'),
    title: 'Parks and WildLife',
    subTitle: 'Visit to this wildlife park will rejuvenate your mind and spirit',
    location: 'Jos, Lagos, Calabar, Abuja, etc',
    phone: '',
    credit: 'The Freeman Institute',
    gallery:[
        {
            id: 'v2',
            photos: [

                  require('../../assets/img/places/parks/ikogosi.png'),
                  require('../../assets/img/places/parks/abujaPark.png'),
                  require('../../assets/img/places/parks/raindeer.png'),
                  require('../../assets/img/places/parks/kainji.png'),
                  require('../../assets/img/places/parks/elephant.png'),
                  require('../../assets/img/places/parks/owuH2OFalls.png'),
            ]
        }
    ],
    description: 'Excerpts from online wiki',

},
{
    id: 'c',
    image: require('../../assets/img/places/resorts/badagry.png'),
    title: 'Resorts and Beaches',
    subTitle: 'Simply exquisite vacation sites, peaceful and beautiful beaches. Go on horseback riding or whatever suits you.',
    location: 'Lagos, Calabar, Abuja, etc',
    phone: '',
    credit: 'Online wiki',
    gallery:[
        {
            id: 'v3',
            photos: [
                  require('../../assets/img/places/resorts/funtopiaPark.png'),
                  require('../../assets/img/places/resorts/barBeach.png'),
                  require('../../assets/img/places/resorts/obudu.png'),
                  require('../../assets/img/places/resorts/funtopiaPark.png'),
                  require('../../assets/img/places/resorts/whisperingPalms.png'),
                  require('../../assets/img/places/resorts/tinapa.png'),
            ]
        }
    ],
    description: 'Excerpts from online wiki',

},
{
    id: 'd',
    image: require('../../assets/img/places/museum/museumBeni.png'),
    title: 'National Musuems',
    subTitle: 'Incredible museums of history and education with variety to enrich the minds.',
    location: 'Lagos, Jos, Kaduna, Enugu, Benin, etc',
    phone: '',
    credit: 'Ministry of Tourism',
    gallery:[
        {
            id: 'v4',
            photos: [
                  require('../../assets/img/places/museum/museumLagos.jpg'),
                  require('../../assets/img/places/museum/museumWar.jpg'),
                  require('../../assets/img/places/museum/museumKaduna.jpg'),
                  require('../../assets/img/places/museum/museumOwo.jpg'),
                  require('../../assets/img/places/museum/museumColonia.jpg'),
                  require('../../assets/img/places/museum/museumOwo.jpg'),
            ]
        }
    ],
    description: 'Excerpts from online wiki',

},

] 

// export const placesData = 
// [
//     {
//         id: 'a',
//         image: require('../../assets/img/places/museum/slave/slavePic.jpg'),
//         title: 'Slave Trade Museum',
//         subTitle: 'One of many rare gems of history and education',
//         location: 'Badagry, Lagos',
//         phone: '',
//         credit: 'The Freeman Institute',
//         photos:{
//             key: 'a1',
//             pic1: require('../../assets/img/places/museum/slave/abolitionCannon.jpg'),
//             pic2: require('../../assets/img/places/museum/slave/holdingCell.jpg'),
//             pic3: require('../../assets/img/places/museum/slave/slaveMarket.jpg'),
//             pic4: require('../../assets/img/places/museum/slave/slaveNoReturn.jpg'),
//             pic5: require('../../assets/img/places/museum/slave/bibleAtBadagry.jpg'),
//             pic6: require('../../assets/img/places/museum/slave/bridge.jpg'),
//         },
//         description: 'Excerpts from Freeman Institute',

//     },
//     {
//         id: 'b',
//         image: require('../../assets/img/places/parks/yankari.png'),
//         title: 'Parks and WildLife',
//         subTitle: 'Visit to this wildlife park will rejuvenate your mind and spirit',
//         location: 'Jos, Lagos, Calabar, Abuja, etc',
//         phone: '',
//         credit: 'The Freeman Institute',
//         photos:{
//             key: 'b1',
//             pic1: require('../../assets/img/places/parks/ikogosi.png'),
//             pic2: require('../../assets/img/places/parks/abujaPark.png'),
//             pic3: require('../../assets/img/places/parks/raindeer.png'),
//             pic4: require('../../assets/img/places/parks/kainji.png'),
//             pic5: require('../../assets/img/places/parks/elephant.png'),
//             pic6: require('../../assets/img/places/parks/owuH2OFalls.png'),
//         },
//         description: 'Excerpts from online wiki',

//     },
//     {
//         id: 'c',
//         image: require('../../assets/img/places/resorts/badagry.png'),
//         title: 'Resorts and Beaches',
//         subTitle: 'Simply exquisite vacation sites, peaceful and beautiful beaches. Go on horseback riding or whatever suits you.',
//         location: 'Lagos, Calabar, Abuja, etc',
//         phone: '',
//         credit: 'Online wiki',
//         photos:{
//             key: 'c1',
//             pic1: require('../../assets/img/places/resorts/funtopiaPark.png'),
//             pic2: require('../../assets/img/places/resorts/barBeach.png'),
//             pic3: require('../../assets/img/places/resorts/obudu.png'),
//             pic4: require('../../assets/img/places/resorts/funtopiaPark.png'),
//             pic5: require('../../assets/img/places/resorts/whisperingPalms.png'),
//             pic6: require('../../assets/img/places/resorts/tinapa.png'),
//         },
//         description: 'Excerpts from online wiki',

//     },
//     {
//         id: 'd',
//         image: require('../../assets/img/places/museum/museumBeni.png'),
//         title: 'National Musuems',
//         subTitle: 'Incredible museums of history and education with variety to enrich the minds.',
//         location: 'Lagos, Jos, Kaduna, Enugu, Benin, etc',
//         phone: '',
//         credit: 'Ministry of ?',
//         photos:{
//             key: 'd1',
//             pic1: require('../../assets/img/places/museum/museumLagos.jpg'),
//             pic2: require('../../assets/img/places/museum/museumWar.jpg'),
//             pic3: require('../../assets/img/places/museum/museumKaduna.jpg'),
//             pic4: require('../../assets/img/places/museum/museumOwo.jpg'),
//             pic5: require('../../assets/img/places/museum/museumColonia.jpg'),
//             pic6: require('../../assets/img/places/museum/museumOwo.jpg'),
//         },
//         description: 'Excerpts from online wiki',

//     },
// ]

0 个答案:

没有答案
相关问题
最新问题