学习React Native(三)HelloWorld 基本源码学习

如果有错误请大家在下面留言，没办法，谁让自己是小白，边查资料边学！请包涵！
打开index.ios.js
第一行源码

'use strict';

js 严格模式
设立”严格模式”的目的，主要有以下几个：
　　- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
　　- 消除代码运行的一些不安全之处，保证代码运行的安全；
　　- 提高编译器效率，增加运行速度；
　　- 为未来新版本的Javascript做好铺垫。
“严格模式”体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。
另一方面，同样的代码，在”严格模式”中，可能会有不一样的运行结果；一些在”正常模式”下可以运行的语句，在”严格模式”下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。
看详情，原文

var React = require('react-native');
引入react-native 方法

var {
  AppRegistry,//AppRegistry 定义了App的入口，并提供了根组件
  StyleSheet,//布局
  Text,//显示文字的Text
  View,//View 容器 Text载体
} = React;

声明的变量，在下文代码中都可以找到相应的方法

var HelloWorld = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          HelloWorld
        </Text>
        <Text style={styles.instructions}>
          To get started,edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
});

如果没有查资料，单从表面看，应该是创建了一个类，来承载视图

var styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: { fontSize: 20,textAlign: 'center',marginBottom: 0,instructions: { textAlign: 'center',color: '#333333',marginBottom: 5,});

这个是改变布局的样式让我想起了ios Autlayout,如果你有开发经验应该能猜出来一些属性是干什么用的
，我也是看这个[CSS]快速的看了点皮毛大概懂了一些 (http://www.w3school.com.cn/css/index.asp)

上面写的就当我意淫了！看下面！看下面！看下面！
国内翻译深入浅出ReactNative 经典必看

学习React Native(三)HelloWorld 基本源码学习

相关推荐