使用Expo Snack更新代码后，Expo Client App中出现了方格图案

Question

我正在使用Expo Snack开发我的App项目。当我尝试将JS添加到零食中时，Expo Client App（iOS）上的预览变为：

我添加的类称为CustomTabBar.js：

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
} from 'react-native';

// Change image file names if you need
export const tabImages = {
    'tab1': require('./assets/btn_square_view.png'),
    'tab2': require('./assets/btn_list_view.png'),
    'tab3': require('./assets/btn_tagged_view.png'),
    'tab4': require('./assets/btn_bookmark.png'),

    'tab1selected': require('./assets/btn_square_view_selected.png'),
    'tab2selected': require('./assets/btn_list_view_selected.png'),
    'tab3selected': require('./assets/btn_tagged_view_selected.png'),
    'tab4selected': require('./assets/btn_bookmark.png'),
};

const CustomTabBar = React.createClass({
  tabIcons: [],

  propTypes: {
    goToPage: React.PropTypes.func,
    activeTab: React.PropTypes.number,
    tabs: React.PropTypes.array,
  },

  componentDidMount() {

  },

  render() {
    return (
      <View style={[styles.tabs, this.props.style, ]}>
      {this.props.tabs.map((tab, i) => 
        {
          return (
            <TouchableOpacity 
                    key={tab} 
                    onPress={() => this.props.goToPage(i)}
                    style={styles.tab}>
                <Image source={this.prop.activeTab === i ? tabImages[tab + 'selected'] : tabImages[tab]} />
            </TouchableOpacity>
          );
        })
      }
      </View>
    );
  },
});

const styles = StyleSheet.create({
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 10,
  },
  tabs: {
    height: 45,
    flexDirection: 'row',
    paddingTop: 5,
    borderWidth: 1,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderBottomColor: 'rgba(0,0,0,0.05)',
  },
});

export default CustomTabBar;

我在CustomTabBar的{​​{1}}处致电：

App.js

我已经将相关图像上传到该路径，并且在Expo Snack中未检测到错误。我该如何解决这个问题？