React Native

(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

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原生组件模块封装；