剛開(kāi)始學(xué)React-Native , 無(wú)法使用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中，寫(xiě)

/**
 * 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);

但如下錯(cuò)誤

Screenshot_20170122-095619.png

經(jīng)過(guò)了多方查找，發(fā)現(xiàn)錯(cuò)誤在這里

import Logo from "./Logo"

這對(duì)習(xí)慣了當(dāng)前路徑就在編譯路徑下的人。。就是個(gè)坑。。。

好吧，我菜！！！

Screenshot_20170122-100150.png

this關(guān)鍵字

先看報(bào)錯(cuò)的代碼

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);

這段代碼的作用比較容易明白。
先顯示一個(gè)Logo頁(yè)面，Logo里使用setTimeout觸發(fā)一個(gè)onTimeOut事件。
（見(jiàn)我的 第一個(gè)坑的文章 http://www.lxweimin.com/p/f688377e6a6a）
onTimeOut調(diào)用本地的jumpToHome
JumpToHome修改state，使得顯示一個(gè)Home出來(lái)。

但這個(gè)看起來(lái)沒(méi)問(wèn)題的代碼，報(bào)錯(cuò)了。

錯(cuò)誤解決

Screenshot_20170122-112133.png

使用console.log(this)打印出來(lái)發(fā)現(xiàn)是空的。。。。

我似乎明白點(diǎn)什么了。。。網(wǎng)上找了個(gè)代碼

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

放到constructor中。

...我真想吐個(gè)槽。。用一個(gè)this真的有必要綁一下嗎？？？！！！！

另一種寫(xiě)法

當(dāng)然我對(duì)上述代碼又做了點(diǎn)優(yōu)化

/**
 * 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表達(dá)式的寫(xiě)法，不用綁定！！！

有一種寫(xiě)法

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

這種寫(xiě)法似乎比較常見(jiàn)！
比如

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>
    );
}