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布局