React Native入門教程2 -- 基本組件使用及樣式

在上一篇文章中，咱們學會了如何搭建React Native的環境（React Native入門教程(筆記) 1 – 開發環境搭建），不知道大家是否搭建好了呢，若是尚未，那麼快動起小手，來體驗RN帶給咱們的樂趣。

歡迎加入React Native討論羣：120663591

因爲我也沒怎麼接觸過js和css，因此就用本身的方式來學習，因此文章中有錯誤在所不免，若是您發現了錯誤，請及時在文章底下評論。我我的比較合適的學習方式是直接開發，遇到什麼不會就去查，先把大概怎麼寫混熟，等到能夠熟練寫出程序以後，再去從新跟着基礎查漏補缺。 這樣作的緣由是，對於初學者，直接給出許多屬性，是記不住的，系統的學下來以後，若是沒有大量聯繫，最終只有忘記，因此給本身一個編程的環境，告訴本身在開發，而不是單純的學，這樣也算是個捷徑吧。
轉載請註明出處：http://blog.csdn.net/wingichoy/article/details/51810882

電影介紹界面

本次教程的項目使用的是facebook的官方例子來學習，是一個電影上映的界面，經過這個例子，你能夠學習到基本組件的使用，以及樣式的改寫。官方文檔連接

首先，打開咱們init好的項目，能夠看到有index.android.js和index.ios.js兩個js文件，分別對應android的界面和ios的界面：

打開index.android.js，對其中初始化代碼進行分析。
能夠看到初始化代碼基本分四個部分：

1.導入部分
2.視圖部分
3.樣式部分
4.註冊部分

1.導入部分

//導入React
import React, { Component } from 'react';
//導入各個組件
import {
  AppRegistry,  //註冊器
  StyleSheet,   //style
  Text,         //Text 至關於android的TextView
  TextInput,    //輸入框 至關於android的EditText
  View,         //基本的視圖容器
  Image,        //圖片組件 至關於android的ImageView

} from 'react-native';

此部分是將須要用的到組件導入，分別相似於：

#include "stdio.h"  //c語言
import com.wing.*   //java語言

2.視圖部分

class My extends Component {
  render() {
    return (
       //設置一個跟容器
      <View style={styles.container}>
      //設置3個文本組件，樣式分別引用各自的style
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

在這一部分，相似於Android的Activity，也就是一個程序的界面。對比Android來講呢，比如是Activity動態添加的View，也就是說視圖的樣式是默認的。他的樣式由 styles(至關於Android的xml佈局文件)決定。以上代碼的意思就是說在主容器內添加了兩個Text控件和一個Image控件，他們的樣式分別由各自的style決定。

3.樣式部分

//定義一個StyleSheet常量
const styles = StyleSheet.create({
  //設置容器樣式
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  //設置各自的樣式，下同
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

此部分爲各個組件的樣式定義，語法上跟CSS大同小異，因爲我也不太熟悉CSS的屬性，因此用到的時候去查，多寫幾遍應該就記住了，孰能生巧嘛。
在此部分，至關於Android裏面的xml文件，fontSize對應android:textSize。相信你很輕易就能夠看明白。

4.註冊部分

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

每一個應用必須進行註冊之後才能夠渲染視圖，每一個APP只須要渲染一次便可。

開始製做第一款App，電影介紹

因爲電影介紹，須要有電影的名稱，年份，海報等。 因此咱們如今本地模擬一個數據：

var MOVIES_DATA=[
    {
        title: 'Warcraft',
        year: '2016',
        img: 'http: //b.hiphotos.baidu.com/baike/pic/item/b03533fa828ba61ed1b6ccc84634970a314e59f8.jpg'
    }
];

因爲在程序裏使用到了Image等組件，因此須要進行導入

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

以後就能夠編寫界面，在容器里加入咱們的組件。

class WingProject extends Component {
  render() {
    //獲取模擬的電影數據
    var movie = MOVIES_DATA[0];
    return (
      //添加主容器 並設置style
      <View style={styles.container}>
        //添加各個組件，並設置style
        <Text style = {styles.title}>{movie.title}</Text>
        <Text style = {styles.title}>{movie.year}</Text>
        <Image source={{uri:movie.img}}
               style = {styles.image}
        />
      </View>
    );
  }
}

完成以後，接下來定義style

const styles = StyleSheet.create({
//設置主容器的佈局
  container: {
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  //image必須設置大小，否則圖片就不會顯示
  image:{
    width:400,
    height:600,
  },
  //設置字體大小爲20
  title:{
    fontSize:20,
  }
});

在程序的最後，對應用進行註冊操做：

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

運行APP

編碼已經完成，在cmder裏鍵入 run-android命令運行如下試試吧！

能夠看到APP已經運行了 界面以下：

哈哈 有木有很開薰~~~

若是你喜歡個人博客，請評論或者點擊關注，謝謝！

下一篇: React Native入門教程 3 – Flex佈局