React Native Tutorial摘要（一）

###安裝 在Mac上用homebrew安裝很是簡單：

brew install node
brew install watchman
npm install -g react-native-cli

固然前提也須要安裝好Xcode和Android SDK及虛擬機。

而後就能夠玩了，初始化一個project

react-native init AwesomeProject

這個時間稍微有點長，完成後可啓動

cd AwesomeProject
react-native run-ios

官方向導
固然在按照官方向導時，安裝Android Studio後，記得要使用SDK Manager和AVD Manager安裝目標版本的SDK和模擬器。

###簡單的用例 語法使用ES6標準，另外須要瞭解些React基本概念，如JSX、Component、state和props。

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

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

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

將上面代碼貼入index.ios.js，而後在已經跑起來的模擬器中cmd+R就能夠即時加載。

** 上面相似於在JS中寫html的形式，在這裏叫JSX。** ** 上面看起來像html的Text，它實際上是一個Component。**

• 要使用Component，須要先import。
• AppRegistry只是爲了告訴React Native誰是Root Component。

####Props

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

class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

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

以像html的attribute的形式注入組件中。

在我看來，它是抽出一些特性出來支持定製，讓Component能夠容易複用。 如：

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

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

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

####state state也是Component內部帶有一種模型，與props不一樣，它的目的是爲了支持值變化。

• 在構造器中初始化它，而後當想change的時候調用setState從新設置。
• 真實場景多是，當一條請求返回數據回調時，或者用戶輸入數據時等。
• 官方有提到Redux，推薦使用Redux——一個state容器，去控制data flow。那樣不會用太多機會直接調用setStats方法。

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

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

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

State works the same way as it does in React, so for more details on handling state, you can look at the React.Component API.

####Style React組件中能夠使用類CSS同樣去控制樣式，能夠將background-color這樣的使用backgroundColor去對照使用。 Style是一個命名爲style的props，全部的Core component都支持它。

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

class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

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

**style能夠接受數組，如_[styles.bigblue, styles.red]_。相同的樣式，後面的將覆蓋前面的。 **StyleSheet.create中，每個對象如一個class。