简年1: React-Native踩坑记（汇总一）

刚开始学React-Native , 无法使用Import

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

export default class Logo extends Component{
    render(){
        let pic = {
            uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
        }
        return (
            
                
            
            );
    }
}

const logo_styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  
});

在index.android.js中，写

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  Image,
  View
} from 'react-native';

import Logo from "Logo"


export default class zz extends Component {
  render(){
        return ;
    //return 
  }

}

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

但如下错误

Screenshot_20170122-095619.png

经过了多方查找，发现错误在这里

import Logo from "./Logo"

这对习惯了当前路径就在编译路径下的人。。就是个坑。。。

好吧，我菜！！！

Screenshot_20170122-100150.png

this关键字

先看报错的代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  Image,
  View
} from 'react-native';

import MyScene from "./MyScene"
import Logo from "./node_a/Logo"
import Home from "./node_a/Home"

export default class BaZi extends Component {
  constructor(props){
      super(props);
      this.state = {isLogo: true};
  }
  jumpToHome(){
      console.log("jumptohome :");
      this.setState({isLogo:false});
  }
  render() {
    console.log("render :"+JSON.stringify(this.state));
      if (this.state.isLogo) {
        return ;
      }else{
        return ;
      }
  }

}

AppRegistry.registerComponent('bazi', () => BaZi);

这段代码的作用比较容易明白。
先显示一个Logo页面，Logo里使用setTimeout触发一个onTimeOut事件。
（见我的 第一个坑的文章 http://www.jianshu.com/p/f688377e6a6a）
onTimeOut调用本地的jumpToHome
JumpToHome修改state，使得显示一个Home出来。

但这个看起来没问题的代码，报错了。

错误解决

Screenshot_20170122-112133.png

使用console.log(this)打印出来发现是空的。。。。

我似乎明白点什么了。。。网上找了个代码

this.jumpToHome = this.jumpToHome.bind(this);

放到constructor中。

...我真想吐个槽。。用一个this真的有必要绑一下吗？？？！！！！

另一种写法

当然我对上述代码又做了点优化

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  Image,
  View
} from 'react-native';

import MyScene from "./MyScene"
import Logo from "./node_a/Logo"
import Home from "./node_a/Home"

export default class BaZi extends Component {
  constructor(props){
      super(props);
      this.state = {isLogo: true};
  }
  render() {
      if (this.state.isLogo) {
        return {this.setState({isLogo:false});}}/>;
      }else{
        return ;
      }
  }

}

AppRegistry.registerComponent('bazi', () => BaZi);

用lambda表达式的写法，不用绑定！！！

有一种写法

{this.jumpToHome.bind(this)}/>;

这种写法似乎比较常见！
比如

render() {
    return (
        
            
                Push Plain Screen
            

            
                Push Styled Screen
            

            
                Show Modal Screen
            

            {
                Platform.OS === 'ios' ?
                    
                        Show LightBox
                     : false
            }

            {
                Platform.OS === 'ios' ?
                    
                        Show In-App Notification
                     : false
            }

            
                Show Single Screen App
            
        
    );
}