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

前端之家收集整理的这篇文章主要介绍了学习React Native(三)HelloWorld 基本源码学习前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

'use strict';

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

@H_404_20@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 经典 必看

原文链接:https://www.f2er.com/react/307472.html

猜你在找的React相关文章