Android undefined不是对象（评估'；this.state.product.images.map'；）

尝试使用本机基本组件打开带有静态内容的详细信息屏幕，在iOS中工作正常，但在android中，我遇到了与“Roboto medium”字体相关的问题，因此在研发之后，我知道我必须使用font.loadAsync方法从本机基本导入字体模块。因此，我使用async和Wait方法从本机库加载字体。现在，当我从本机库加载字体后尝试设置产品状态时，我的呈现函数不会再次被调用，我不知道为什么它不会被调用，因为设置状态总是调用呈现方法本身

这是我的组件：-

    import React, { Component } from 'react';
    import { Image, Dimensions, TouchableWithoutFeedback, AsyncStorage,StyleSheet,Text} from 'react-native';
    import { View, Root, Container, Content, Button, Left, Right, Icon, Picker, Item, Grid, Col, Toast,TextRN } from 'native-base';
    import Carousel, { Pagination } from 'react-native-snap-carousel';
    import { Font, AppLoading } from "expo";
    export default class Product extends Component {

      constructor(props) {
        super(props);
        this.state = {
          product: {},
          activeSlide: 0,
          quantity: 1,
          selectedColor: '',
          selectedSize: '',
          loading: true 
        };
      }
      static route = {
        navigationBar: {
          title: 'ProductDetail',
          tintColor: '#FFF',
        },
      };
       async componentWillMount() {
         await Font.loadAsync({
           Roboto: require("native-base/Fonts/Roboto.ttf"),
           Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf")
         });
         this.setState({ loading: false, product: dummyProduct});

           alert(JSON.stringify(this.state.product));  
         if (this.state.product.length > 0) {
           let defColor = this.state.product.colors[0];
           let defSize = this.state.product.sizes[0];
           this.setState({
             selectedColor: defColor,
             selectedSize: defSize
           });
         } 
      } 



      render() {
        if (this.state.product.length <= 0) { 
          return (
            <Text>Loading</Text>
          );
        }
        return(

          <Container style={{backgroundColor: '#fdfdfd'}}>

            <Content>
              <Carousel
                  ref={(carousel) => { this._carousel = carousel; }}
                  sliderWidth={Dimensions.get('window').width}
                  itemWidth={Dimensions.get('window').width}
                  onSnapToItem={(index) => this.setState({ activeSlide: index }) }
                  enableSnap={true}
                >
                    {this.renderImages()}
                </Carousel>
                <Pagination
                  dotsLength={this.state.product.images.length}
                  activeDotIndex={this.state.activeSlide}
                  containerStyle={{ backgroundColor: 'transparent',paddingTop: 0, paddingBottom: 0, marginTop: -15 }}
                  dotStyle={{
                      width: 10,
                      height: 10,
                      borderRadius: 5,
                      marginHorizontal: 2,
                      backgroundColor: 'rgba(255, 255, 255, 0.92)'
                  }}
                  inactiveDotOpacity={0.4}
                  inactiveDotScale={0.6}
                />
              <View style={{backgroundColor: '#fdfdfd', paddingTop: 10, paddingBottom: 10, paddingLeft: 12, paddingRight: 12, alignItems: 'center'}}>
                <Grid>
                  <Col size={3}>
                    <TextRN style={{ fontSize: 18 }}>{this.state.product.title}</TextRN>
                  </Col>
                  <Col>
                    <TextRN style={{ fontSize: 20, fontWeight: 'bold' }}>{this.state.product.price}</TextRN>
                  </Col>
                </Grid>
                <Grid style={{marginTop: 15}}>
                  <Col>
                    <View style={{flex: 1, justifyContent: 'center'}}>
                      <TextRN>Color:</TextRN>
                    </View>
                  </Col>
                  <Col size={3}>
                    <Picker
                      mode="dropdown"
                      placeholder="Select a color"
                      note={true}
                      selectedValue={this.state.selectedColor}
                      onValueChange={(color) => this.setState({selectedColor: color})}
                    >
                      {this.renderColors()}
                    </Picker>
                  </Col>
                </Grid>
                <Grid>
                  <Col>
                    <View style={{flex: 1, justifyContent: 'center'}}>
                      <TextRN>Size:</TextRN>
                    </View>
                  </Col>
                  <Col size={3}>
                    <Picker
                      mode="dropdown"
                      placeholder="Select a size"
                      note={true}
                      selectedValue={this.state.selectedSize}
                      onValueChange={(size) => this.setState({selectedSize: size})}
                    >
                      {this.renderSize()}
                    </Picker>
                  </Col>
                </Grid>
                <Grid>
                  <Col>
                    <View style={{flex: 1, justifyContent: 'center'}}>
                      <TextRN>Quantity:</TextRN>
                    </View>
                  </Col>
                  <Col size={3}>
                    <View style={{flex: 1, flexDirection: 'row'}}>
                      <Button style={{flex: 1}} icon light onPress={() => this.setState({quantity: this.state.quantity>1 ? this.state.quantity-1 : 1})} >
                        <Icon name='ios-remove-outline' />
                      </Button>
                      <View style={{flex: 4, justifyContent: 'center', alignItems: 'center', paddingLeft: 30, paddingRight: 30}}>
                        <TextRN style={{ fontSize: 18 }}>{this.state.quantity}</TextRN>
                      </View>
                      <Button style={{flex: 1}} icon light onPress={() => this.setState({quantity: this.state.quantity+1})}>
                        <Icon name='ios-add' />
                      </Button>
                    </View>
                  </Col>
                </Grid>
                <Grid style={{marginTop: 15}}>
                  <Col size={3}>
                    <Button block onPress={this.addToCart.bind(this)} style={{backgroundColor: '#2c3e50'}}>
                      <TextRN style={{ color: "#fdfdfd", marginLeft: 5 }}>Add to cart</TextRN>
                    </Button>
                  </Col>
                  <Col>
                  <Button block onPress={this.addToWishlist.bind(this)} icon transparent style={{backgroundColor: '#fdfdfd'}}>
                    <Icon style={{color: '#2c3e50'}} name='ios-heart' />
                  </Button>
                  </Col>
                </Grid>
                <View style={{marginTop: 15, padding: 10, borderWidth: 1, borderRadius: 3, borderColor: 'rgba(149, 165, 166, 0.3)'}}>
                  <TextRN style={{ marginBottom: 5 }}>Description</TextRN>
                  <View style={{width: 50, height: 1, backgroundColor: 'rgba(44, 62, 80, 0.5)', marginLeft: 7, marginBottom: 10}} />
                  <TextRN note>
                    {this.state.product.description}
                  </TextRN>
                </View>
              </View>
              <View style={{marginTop: 15, paddingLeft: 12, paddingRight: 12}}>
                <TextRN style={{ marginBottom: 5 }}>Similar items</TextRN>
                <View style={{width: 50, height: 1, backgroundColor: 'rgba(44, 62, 80, 0.5)', marginLeft: 7, marginBottom: 10}} />

              </View>
            </Content>

          </Container>
        );


      }

 renderImages() {
    let images = [];
    this.state.product.images.map((img, i) => {
      images.push(
          <TouchableWithoutFeedback
            key={i}
            onPress={() => this.openGallery(i)}
          >
            <Image
              source={{uri: img}}
              style={{width: Dimensions.get('window').width, height: 350}}
              resizeMode="cover"
            />
          </TouchableWithoutFeedback>
      );
    });
    return images;
  }
    }

    const dummyProduct = {
      id: 2,
      title: 'V NECK T-SHIRT',
      description: "Pellentesque orci lectus, bibendum iaculis aliquet id, ullamcorper nec ipsum. In laoreet ligula vitae tristique viverra. Suspendisse augue nunc, laoreet in arcu ut, vulputate malesuada justo. Donec porttitor elit justo, sed lobortis nulla interdum et. Sed lobortis sapien ut augue condimentum, eget ullamcorper nibh lobortis. Cras ut bibendum libero. Quisque in nisl nisl. Mauris vestibulum leo nec pellentesque sollicitudin. Pellentesque lacus eros, venenatis in iaculis nec, luctus at eros. Phasellus id gravida magna. Maecenas fringilla auctor diam consectetur placerat. Suspendisse non convallis ligula. Aenean sagittis eu erat quis efficitur. Maecenas volutpat erat ac varius bibendum. Ut tincidunt, sem id tristique commodo, nunc diam suscipit lectus, vel",
      image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250,w_358,x_150/v1500465309/pexels-photo-206470_nwtgor.jpg',
      images: [
        'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250,w_358,x_150/v1500465309/pexels-photo-206470_nwtgor.jpg',
        'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250,x_226,y_54/v1500465309/pexels-photo-521197_hg8kak.jpg',
        'http://res.cloudinary.com/atf19/image/upload/c_crop,g_face,h_250,x_248/v1500465308/fashion-men-s-individuality-black-and-white-157675_wnctss.jpg',
        'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250/v1500465308/pexels-photo-179909_ddlsmt.jpg'
      ],
      price: '120$',
      colors: ['Red', 'Blue', 'Black'],
      sizes: ['S', 'M', 'L', 'XL', 'XXL'],
      category: 'MAN',
      similarItems: [
        {id: 10, title: 'V NECK T-SHIRT', price: '29$', image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,g_face,h_250,x_248/v1500465308/fashion-men-s-individuality-black-and-white-157675_wnctss.jpg'},
        {id: 11, title: 'V NECK T-SHIRT', price: '29$', image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250/v1500465308/pexels-photo-179909_ddlsmt.jpg'},
        {id: 12, title: 'V NECK T-SHIRT', price: '29$', image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250/v1500465308/pexels-photo-179909_ddlsmt.jpg'}
      ]
    };

import React，{Component}来自'React'；
从“react native”导入{图像、维度、无反馈触摸、异步存储、样式表、文本}；
从“本机基”导入{View、Root、Container、Content、Button、Left、Right、Icon、Picker、Item、Grid、Col、Toast、TextRN}；
从“react native snap Carousel”导入旋转木马，{Pagination}；
从“expo”导入{Font，AppLoading}；
导出默认类产品扩展组件{
建造师（道具）{
超级（道具）；
此.state={
产品：{}，
动态幻灯片：0，
数量：1，
所选颜色：“”，
selectedSize:“”，
加载：正确
};
}
静态路由={
导航栏：{
标题：“ProductDetail”，
tintColor:“#FFF”，
},
};
异步组件willmount（）{
等待Font.loadAsync({
Roboto:require（“native base/font/Roboto.ttf”），
Roboto_medium:require（“native base/font/Roboto_medium.ttf”）
});
this.setState（{loading:false，product:dummyProduct}）；
警报（JSON.stringify（this.state.product））；
如果（this.state.product.length>0）{
让defColor=this.state.product.colors[0]；
设defSize=this.state.product.size[0]；
这是我的国家({
selectedColor:defColor，
selectedSize:defSize
});
} 
} 
render（）{
if（this.state.product.length this.setState（{activeSlide:index}）}
enableSnap={true}
>
{this.renderImages（）}
{this.state.product.title}
{this.state.product.price}
颜色：
this.setState（{selectedColor:color}）}
>
{this.renderColors（）}
尺寸：
this.setState（{selectedSize:size}）}
>
{this.renderSize（）}
数量：
this.setState（{quantity:this.state.quantity>1？this.state.quantity-1:1}>
{this.state.quantity}
this.setState（{quantity:this.state.quantity+1}}>
添加到购物车
描述
{this.state.product.description}
类似项目
);
}
渲染（）{
让图像=[]；
this.state.product.images.map（（img，i）=>{
图像推送(
这个.openGallery（i）}
>
);
});
返回图像；
}
}
常数dummyProduct={
id:2，
标题：“V领T恤”，
说明："佩伦特式的兽人崇拜，比本杜姆·艾库利斯·阿利奎特，乌兰科佩尔·尼普·伊普，拉奥里特·奥古斯特·努克，拉奥里特·阿库·阿库特，胡斯托·马莱苏阿达·胡斯托，多涅克·波特特·胡斯托，塞德·乌兰科佩尔·内普，塞德·乌兰科佩尔·乌兰科佩尔·奥古斯调味品，埃格·乌兰科佩尔·尼布·卢波提斯，胡斯托·比本杜姆·利奥在nisl中的奎斯。莫里斯前庭狮子座nec pellentesque sollicitudin。pellentesque eros，在iaculis nec中的威尼斯人，在eros中的卢克图斯。怀孕期的大相位。前边缘的大圆孔直径连续的小圆孔。悬韧带。埃尼亚射手座eu erat quis QUICITUR。前蜗壳ac VARIS bibendum。Ut tinc tincidunt，sem id tristique commodo，nunc diam suscipit lectus，vel“，
图像：'http://res.cloudinary.com/atf19/image/upload/c_crop，h_250，w_358，x_150/v1500465309/pexels-photo-206470_nwtgor.jpg'，
图像：[
'http://res.cloudinary.com/atf19/image/upload/c_crop，h_250，w_358，x_150/v1500465309/pexels-photo-206470_nwtgor.jpg'，
'http://res.cloudinary.com/atf19/image/upload/c_crop，h_250，x_226，y_54/v1500465309/pexels-photo-521197_hg8kak.jpg'，
'http://res.cloudinary.com/atf19/image/upload/c_crop，g_面，h_250，x_248
<Carousel
    data={this.state.product.images}
    renderItem={this.renderImages}
    ref={(carousel) => { this._carousel = carousel; }}
    sliderWidth={Dimensions.get('window').width}
    itemWidth={Dimensions.get('window').width}
    onSnapToItem={(index) => this.setState({ activeSlide: index }) }
    enableSnap={true}
/>

renderImages({item, index}) {
    return(
        <TouchableWithoutFeedback key={index}>
            <Image
                source={{uri: item}}
                style={{width: Dimensions.get('window').width, height: 350}}
                resizeMode="cover"
            />
        </TouchableWithoutFeedback>
    );
}