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

最新推荐文章于 2023-03-31 23:09:23 发布

不在犯二的IT男

最新推荐文章于 2023-03-31 23:09:23 发布

阅读量962

点赞数

分类专栏： react 文章标签： native

本文链接：https://blog.csdn.net/lengshengren/article/details/50088105

版权

react 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

如果有错误请大家在下面留言，没办法，谁让自己是小白，边查资料边学！请包涵！
打开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,
  },
});