(1) 基础知识
1、组件
和React的封装方式一致
2、样式
支持FlexBox布局；
支持大部分的css样式；
3、原生能力
Android的基本知识；
IOS的基本知识；
(2) React与React Native关系区别
1、组件调用
React组件的调用
import React, { Component } from 'react';
import {
Layout,
Menu,
Breadcrumb,
Icon
} from 'antd';
React Native组件的调用
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
2、样式写法
React的样式调用和写法
export default class App extends Component {
render() {
const { menus, contents, current } = this.state;
return(
<div className="root">
<div className="container">
<Header />
<Content>
{ contents[current] }
</Content>
</div>
</div>
)
}
}
.root {
display: flex;
flex-direction: row;
}
.container {
flex: 1;
height: 480px;
background-color: rgb(240, 245, 249);
}
React Native的样式调用和写法
1、样式调用不是className，而是style；
2、样式属性使用驼峰命名方式书写；
3、样式使用使用StyleSheet.create()创建；
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
3、Android相关知识
React Native项目目录
image.png
Android项目目录
结合项目目录
IOS项目
结合xcode
(3) React Native环境和IDE
Mac电脑可以同时开发IOS和Android，
Window电脑只能开发Android；
Android开始使用Android Studio
IOS开发使用XCode
(4) React Native打包
1、使用原生自由的打包工具和命令；
2、自定义的模块打包，比如文件太大的拆包，按需加载本地文件，按需加载线上文件；
以Android为例
// 打包命令
node node_modules/react-native/local-cli/cli.js bundle --platform android --dev false --entry-file index.js --bundle-output ./src/index.android.bundle
–platform android 意思是编译为android平台所需要的代码，
–entry-file index.android.js 意思是入口文件是RN工程下的index.android.js，因为我们命令是在RN工程目录下执行的，index.android.js也在RN工程根目录，所以不用加相对路径
–bundle-output RNDemo/app/src/main/assets/index.android.bundle 意思是把编译后的bundle输出到哪里，在这里我们和官网要求的一样，输出到我们Android工程的assets目录下，最后定义我们bundle文件的全名称index.android.bundle
–assets-dest RNDemo/app/src/main/res/my_floder 意思是资源文件输出的位置，例如我们最开始提到的RN工程下的imgs文件夹，用于存放图片，就属于资源文件，所有的RN工程需要的资源文件会被copy到RNDemo/app/src/main/res/my_floder这个目录下。
(5) 下次分享
React Native拆包，用户无感知的热更新；
Android和IOS原生组件模块封装；
