React03 移動端跨平臺開發

時間 2019-11-12

原文原文鏈接

目錄html

React-day03 RN移動端開發

React-day03 RN移動端開發

瞭解React-Native

Facebook發起的開源的一套新的APP開發方案，Facebook在當初深刻研究Hybrid開發後，以爲這種模式有先天的缺陷，因此果斷放棄，轉而自行研究，後來推出了本身的「React Native」方案，不一樣於H5，也不一樣於原生Native，更像是用JS寫出原生應用java

優勢

開發成本小於Native模式 Andriod-Java-Kotlin IOS-OC-Swiftreact
性能體驗高於Hybridandroid
一次學習,跨平臺開發Android和iOS, 小程序ios
社區繁榮git

缺點

不一樣平臺代碼有所區別
開發人員學習有必定成本

幾種開發技術對比 ：應用質量和開發效率的平衡折衷的結果

瞭解React-Native工做流程

項目開發：使用Node初始化項目（須要安裝Node），使用JavaScript/JSX語言開發
語言翻譯：Python, C++將js翻譯成java代碼（須要安裝Python2）
代碼編譯：Android-SDK將java編譯成字節碼（二進制），打包成可安裝的apk（須要JDK8 & Android-SDK）
安裝運行：經過Adb工具，把apk運行到Android模擬器

建立第一個React-Native項目 *

安裝腳手架react-native-cli 同時安裝新的版包管理工具github

npm install -g yarn react-native-clishell
建立項目：doubanMovie（在不包含中文的目錄執行）npm

react-native init xxx --version react-native@0.55.4json
運行項目
- 打開USB調試, 配置SDK
  - ANDROID_HOME=G:\Android-SDK
  - PATH=%PATH%;%ANDROID_HOME%\platform-tools
  - adb devices查看已鏈接設備
- 鏈接模擬器: adb connect 127.0.0.1:62001
- 更改gradle路徑doubanMovie\android\gradle\wrapper\gradle-wrapper.properties
  - distributionUrl值修改成file\:///E:/Lesson/bc1/React/day03/Resource/gradle-2.14.1-all.zip 直接複製過來的路徑要把反斜線\改爲正斜線/
- 在項目根目錄執行react-native run-android
  
  運行期間會開啓一個Node服務，不要關閉
- 第一次運行報錯，須要在設備上設置app的Node服務地址
  
  解決方式：打開app > 菜單按鈕 > Dev Settings -> Debug server host ...
  
  填寫服務ip和端口號, 注意冒號用英文半角，重啓服務，重啓應用

瞭解React-Native項目及結構

目錄結構
- index.js 項目入口文件
- App.js 項目根組件，用戶看到的首頁組件
- package.json 項目配置文件
- app.json 配置項目名稱
React-Native與React對比
- 組件寫法
  
  RN提供View,Text組件，沒有html的dom元素
  
  View -> div 佈局容器
  
  Text -> p 顯示文字
- 樣式寫法
  
  使用const styles = StyleSheet.create({...})

React-Native平臺相關代碼處理

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n',
});

開發資料

官方文檔
- 環境初始化：https://facebook.github.io/react-native/docs/getting-started.html
- 組件及APIs：https://facebook.github.io/react-native/docs/components-and-apis.html
中文文檔
- 環境初始化：https://reactnative.cn/docs/0.51/getting-started.html#content
技術博客
- lcode.org
在github.com搜索react
- https://github.com/poplartang 在Stars 搜索React

項目開發

路由(react-native-router-flux)

react-native-router-flux
源碼地址：https://github.com/aksonov/react-native-router-flux

應用場景：在RN項目中進行路由跳轉時使用

安裝方式：yarn add react-native-router-flux

使用：

Router（路由）: 通常寫在項目的根組件

Stack （棧）：給Scene場景提供容器

Scene（場景）：設置路由跳轉規則

Actions （動做）：觸發路由跳轉

const App = () => (
  <Router>
    <Stack key="root">
      <Scene key="login" component={Login} title="Login"/>
      <Scene key="register" component={Register} title="Register"/>
      <Scene key="home" component={Home}/>
    </Stack>
  </Router>
);

注意事項：

最新版的react-native-router-flux會在react-native 0.55.4版本出現isMounted(...)警告，可在App.js添加如下代碼忽略警告。隨後兩個框架更新後，此警告也可消除。
```
import { YellowBox } from 'react-native'
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated'])
```

觸發路由：三種方式（注意導入Actions組件）

<Text onPress={Actions.movieList}>電 影</Text>
<Text onPress={() => { Actions.movieList()}}>電 影</Text>
<Text onPress={() => { Actions['about'].call() }}>關 於</Text>

彈性佈局參考: http://www.runoob.com/w3cnote/flex-grammar.html

開發組件(swiper)

開源輪播圖react-native-swiper
源碼地址：https://github.com/leecade/react-native-swiper

應用場景：在首頁展現輪播圖

安裝方式：yarn add react-native-swiper

經常使用屬性:

index={1}                     默認位置, 從0開始
showsButtons={true}        是否顯示按鈕
autoplayTimeout={2.5}          自動播放停留時間
autoplay={true}               是否自動播放
showsPagination={true}         顯示分頁指示器

網絡請求(fetch) *

Axios
fetch

在 componentDidMount執行請求並在回調中執行setState

// 組件已經掛載
componentDidMount() {
    const url = 'http://api.douban.com/v2/movie/in_theaters';
    fetch(url).then(res => res.json())
        .then(data => {
        // 處理網絡json數據
        this.setState({
            isLoading: false,
            movieList: data.subjects
        })
        // console.warn(data.subjects)
    }).catch((err) => {
        console.error(err);
    });
}

長列表(FlatList) *

長列表優化

<FlatList
    data={this.state.movieList}
    keyExtractor={(item, index) => item.id}
    renderItem={({ item, index }) => {
        return (
            <View style={{ padding: 10, flexDirection: 'row' }}>
                <Text>{item.title}: {item.year} : {index} </Text>
            </View>
        )
    }}
 />

加載指示器

<View style={{ flex: 1, padding: 20 }}>
    <ActivityIndicator />
</View>

條目點擊跳轉

Actions.movieDetail({ "movieId": movie.id, "movieTitle": movie.title});

滾動視圖(ScrollView)

發送網絡請求
渲染視圖

日誌與調試

查看RN日誌：
```
react-native log-ios
react-native log-android
```
android也可在PC控制檯輸入

adb logcat *:S ReactNative:V ReactNativeJS:V

應用內的錯誤與警告

console.warn('Yellow.');
console.error('Red.')；

Debug調試
- Chrome開發者工具
1. 在Android設備菜單中選擇「Debug JS Remotely」，PC會自動經過Chrome瀏覽器打開調試頁面 http://localhost:8081/debugger-ui （須要自行安裝Chrome）。這裏注意自動打開的主機地址可能不是localhost，須要手動改爲localhost （不修改，則手機頁面多是空白）
2. 在Chrome瀏覽器按Ctrl + Shift + I或F12打開控制檯
3. 選中Sources選項卡 -> Network標籤 -> debuggerWorker.js 打開指定組件文件便可
4. 若是沒有沒有debuggerWorker.js, 查看頁面最下邊的Status提示。
  
  Status: Another debugger is already connected
  
  另外一個調試器已鏈接，直接使用或關閉那個調試器
  
  Status: Waiting, press Ctrl R in simulator to reload and connect.
  
  等待中，建議從新加載模擬器
5. 能夠在代碼中打斷點，Console中執行js代碼打印變量、執行腳本
6. 關閉調試：在Android設備菜單中選擇「Stop Remote JS Debugging」便可

打包及發佈

參見中文官網文檔：https://reactnative.cn/docs/0.51/signed-apk-android.html#content
多端統一開發框架：https://github.com/NervJS/taro 生成能運行在微信小程序、H五、React Native 等的應用
修改圖標
- [項目名稱]\android\app\src\main\res\mipmap-xhdpi

今天全部安裝的包

react-native-router-flux 路由

應用場景：在RN項目中進行路由跳轉時使用

安裝方式：yarn add react-native-router-flux
react-native-swiper 開源輪播圖

應用場景：在首頁展現輪播圖

安裝方式：yarn add react-native-swiper