一、创建React Native工程
react-native init AHelloWorld
- 终端执行上述命令后,开始自动创建相应React工程文件,如下图所示:
二、运行React Native工程
- iOS程序和Android程序一启动,就会加载
index.android.js
和index.ios.js
这两个文件,实例化组件,并显示到界面上。
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
// 1. 从react中加载React、Component 组件
import React, { Component } from 'react';
// 2.从react-native中加载原生组件
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
// 3.自定义组件类, export default作为默认输出组件类
export default class AHelloWorld extends Component {
// 3.1 实例化组件方法,用于渲染组件
render() {
return (
<View style={styles.container}>
<Text style={styles.intro}>
大家好,我是旋之华!
</Text>
</View>
);
}
}
// 4.创建样式类, 根据每一个样式对象中的描述,创建样式表,并作用于组件
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
// 5. 注册组件,程序入口
// 第一个参数:注册模块名称,一定要工程名保持一致
// 第二个参数:箭头函数,调用上面组件类
AppRegistry.registerComponent('AHelloWorld', () => AHelloWorld);
-
index.android.js
和index.ios.js
内部代码分析:- React是默认组件,Component是非默认组件,都在node_modules的react文件夹中。
- AppRegistry,StyleSheet,Text,View是原生组件,在node_modules下的react-native文件夹中
三、ReactNative中ES6语法使用分析
- 箭头函数
a => a + a;
就相当于:
function (a) {
return a * a;
}
-
箭头函数相当于匿名函数,并且简化了函数定义;
-
注意:如果要返回一个对象,又是单表达式,这么写的话会报错:
a => { name: a }
-
因为和函数体的{ ... }有语法冲突,所以要改为:
a => ({ foo: a })
- 此外,箭头函数内部的this是词法作用域,由上下文确定,所以不再需要以前的那种hack写法:
var that = this;
- 在ReactNative中,调用表达式、对象、字典的时候都需要用
{}
包住,比如:
<View style={styles.container}>
在JSX语法中,使用变量也需要用{}
包住,比如:
var name = "旋之华";
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>{name}</Text>
</View>
)
如果直接是字典时,需要用到{{...}}
,比如:
<Text style={{fontSize: 20, textAlign: 'center', margin: 10}}>
描述文本样式
</Text>
- 为了避免与函数体的
{ ... }
有语法冲突,凡是返回JSX语句的全部用小括号包裹:
<Text style={{fontSize: 20, textAlign: 'center', margin: 10}}>
描述文本样式
</Text>
长按图片-->识别图中二维码
近期正在把公众账号的文章转移到简书,如果要了解第一动态,请关注我的微信公众账号号,带你从零到一的进行React Native开发实战,在其他文章中会有对应的code和资料发放!
网友评论