React Native学习过程遇到的一些坑

1、Image source size {42, 32} does not match loaded image size {21, 16}
假设图片的名称叫a.png

错误截图

错误原因
检查资源文件a，a@2x.png分辨率不是a.png的两倍，修改资源文件确保@2x是其两倍，@3x分辨率是其三倍之后，问题解决。
----2016-06-16
2、TabBarIOS.Item onPress方法调用，但是界面并没有跟着一起发生变化，示例如下：

class XXXXXX extends Component {
  constructor(props) {
    super(props);
    this.state = {
      menuItems: [{
        title: '新闻',
        icon: require('./App/resources/night_tabbar_icon_news_normal.png'),
        highlight: require('./App/resources/night_tabbar_icon_bar_normal.png'),
        backgroundColor: '#ff0000',
        tag: 'news'
      },
      {
        title: '阅读',
        icon: require('./App/resources/night_tabbar_icon_reader_normal.png'),
        highlight: require('./App/resources/night_tabbar_icon_bar_normal.png'),
        backgroundColor: 'white',
        tag: 'reading'
      },
      {
        title: '视频',
        icon: require('./App/resources/night_tabbar_icon_media_normal.png'),
        highlight: require('./App/resources/night_tabbar_icon_bar_normal.png'),
        backgroundColor: 'blue',
        tag: 'media'
      },
      {
        title: '话题',
        icon: require('./App/resources/night_tabbar_icon_bar_normal.png'),
        highlight: require('./App/resources/night_tabbar_icon_bar_normal.png'),
        backgroundColor: 'yeallow',
        tag: 'bar'
      },
      {
        title: '我',
        icon: require('./App/resources/night_tabbar_icon_me_normal.png'),
        highlight: require('./App/resources/night_tabbar_icon_bar_normal.png'),
        tag: 'me'
      }],
      selectedTag: ''
    };
    this.state.selectedTag = this.state.menuItems[0].tag;
  }
  render() {
    var items = this.state.menuItems.map((itemValue) => {
      return (
        <TabBarIOS.Item
        key = {itemValue.tag}
        selected = {this.state.selectedTag === itemValue.tag}
        title = {itemValue.title}
        icon = {itemValue.icon}
        selectedIcon = {itemValue.highlight}
        onPress = {() => {
          this.state.selectedTag = itemValue.tag;
        }}
        >
        <View style = {{flex: 1, backgroundColor: '#FF0000'}}>
          <Text style = {styles.welcome}>
            {itemValue.title}
          </Text>
        </View>
        </TabBarIOS.Item>
      )
    });
    return (
      <TabBarIOS
      unselectedTintColor = 'gray'
      tintColor = 'red'
      barTintColor = 'white'>
      {items}
      </TabBarIOS>
    );
  }
}

解决办法：

....
onPress = {() => {
          this.setState({
            selectedTag: itemValue.tag
          });
        }}
....

----2016-06-17
3、TabBarIOS.Item初始化代码规范正常，但是界面不显示：
检查原因：

<TabBarIOS.Item
        key = {itemValue.tag}
        selected = {this.state.selectedTag === itemValue.tag}
        title = {itemValue.title}
        icon = {itemValue.icon}
        onPress = {() => {
          this.setState({
            selectedTag: itemValue.tag
          });
        }}
        >
        //这里面是空的！！！！！！！
        </TabBarIOS.Item>

加上视图就可以显示了。
----2016-06-17
4、this.setStateis not a function
检查一下，调用这个地方的函数是不是没有XXX.bind(this)
----2016-06-19
5、onScrollfunction 只调用了一次，虽然已经设置了scrollEventThrottle参数，不管是设置其大于(or <=)16均无任何效果，控制台没有任何报错。

检查一下 onScroll回调函数里是不是执行了些不符合规则的东西
----2016-06-20

React Native学习过程遇到的一些坑

推荐阅读更多精彩内容