(1) 基礎(chǔ)知識

1、組件

和React的封裝方式一致

2、樣式

支持FlexBox布局；
支持大部分的css樣式；

3、原生能力

Android的基本知識；
IOS的基本知識；

(2) React與React Native關(guān)系區(qū)別

1、組件調(diào)用

React組件的調(diào)用

import React, { Component } from 'react';
import {
  Layout,
  Menu,
  Breadcrumb,
  Icon
} from 'antd';

React Native組件的調(diào)用

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

2、樣式寫法

React的樣式調(diào)用和寫法

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的樣式調(diào)用和寫法

1、樣式調(diào)用不是className，而是style；
2、樣式屬性使用駝峰命名方式書寫；
3、樣式使用使用StyleSheet.create()創(chuàng)建；

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相關(guān)知識

image.png

Android項(xiàng)目目錄
結(jié)合項(xiàng)目目錄

IOS項(xiàng)目
結(jié)合xcode

(3) React Native環(huán)境和IDE

Mac電腦可以同時開發(fā)IOS和Android，
Window電腦只能開發(fā)Android；

Android開始使用Android Studio
IOS開發(fā)使用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，因?yàn)槲覀兠钍窃赗N工程目錄下執(zhí)行的，index.android.js也在RN工程根目錄，所以不用加相對路徑
–bundle-output RNDemo/app/src/main/assets/index.android.bundle 意思是把編譯后的bundle輸出到哪里，在這里我們和官網(wǎng)要求的一樣，輸出到我們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原生組件模塊封裝；