刚开始学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 (
            <View style={logo_styles.container}>
                <Image source={pic} style={{width: 193, height: 110}} />
            </View>
            );
    }
}

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 <Logo />;
    //return <Welcome2 name="HHHHH" />
  }

}

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 <Logo onTimeOut={this.jumpToHome}/>;
      }else{
        return <Home />;
      }
  }

}

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 <Logo onTimeOut={()=>{this.setState({isLogo:false});}}/>;
      }else{
        return <Home />;
      }
  }

}

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

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

有一种写法

<Logo onTimeOut={()=>{this.jumpToHome.bind(this)}/>;

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

render() {
    return (
        <View style={{flex: 1, padding: 20}}>
            <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
                <Text style={styles.button}>Push Plain Screen</Text>
            </TouchableOpacity>

            <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
                <Text style={styles.button}>Push Styled Screen</Text>
            </TouchableOpacity>

            <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
                <Text style={styles.button}>Show Modal Screen</Text>
            </TouchableOpacity>

            {
                Platform.OS === 'ios' ?
                    <TouchableOpacity onPress={ this.onLightBoxPress.bind(this) }>
                        <Text style={styles.button}>Show LightBox</Text>
                    </TouchableOpacity> : false
            }

            {
                Platform.OS === 'ios' ?
                    <TouchableOpacity onPress={ this.onInAppNotificationPress.bind(this) }>
                        <Text style={styles.button}>Show In-App Notification</Text>
                    </TouchableOpacity> : false
            }

            <TouchableOpacity onPress={ this.onStartSingleScreenApp.bind(this) }>
                <Text style={styles.button}>Show Single Screen App</Text>
            </TouchableOpacity>
        </View>
    );
}