reactNative学习

因本人水平有限，不足之处还望指正。

hellworld的学习，先上图。

代码：

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

export default class pro2 extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          hello world!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  welcome: {
    fontSize: 20,
	color:'red',
  },
});

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

import React,{Compent} from 'React';这句话就是引入React，这是必须要引入的，可以理解成这样的<script src="...react.js"></script>。

import{

    AppRegistry,

    StyleSheet,

    Text,

    View

} from 'react-native';

这一句是从react-native中引入相关的组件、对象、函数。AppRegistry是注册组件用的，它有一个方法registerComponent是注册一个组件最后渲染出来。StyleSheet是声明样式用的，它有一个方法create是创建样式对象，StyleSheet可以理解成<style></style>声明样式用的。Text和View是组件，这里也可以是其他的组件，例如InputText组件，这块用的较多，需要什么组件，就添加什么组件。

View组件可以理解成布局用的<div></div>标签，Text组件可以理解成p、h、span等标签展现文字用的。

export default class pro2 extends Component

export 是导出组件的意思，extends是继承的意思，对PHP了解的话，extends就好理解了。这句话可以理解成声明一个pro2的类(或者组件，class是类的意思)，该pro2继承Component.

render(){ return(....)}，这是react.js里的，对react.js了解的话，就好理解了。

<view style={styles.container}></view>和<Text style={styles.welcome}></Text>中的style是样式，这里写成对象调用的，可以写成内联样式<view style={{}}></view>,在{{}}里写样式，注意这里的双花括号。在这里可以简单理解<div class="container"></div>和<p class="welcome"></p>这样的。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  welcome: {
    fontSize: 20,
	color:'red',
  },
});

const 是ecs6里面的，声明了一个常量。styles = StyleSheet.crate({});是创建一个样式对象styles，里面有属性container和welcome，说白了就是样式，可以理解成这样的：

<style>

    .container:{

                            flex:1;

                            background-color:'#fff';

                       }

    .welcome{

                            font-size:20px;

                            color:"red";

                       }

</style>

这块要注意background-color是css里的写法，这里要写backgroundColor,凡是有-的都要写成第一单词小写+第二个单词首字母大写。单位要写数字的，例如fontSize:20。

Helloworld的学习先到这里。