【未學習】react native整理筆記

中文文檔

http://reactnative.cn/docs/0.30/listview.html#content

 

一，環境搭建

 

安裝react native命令行

 

npm install -g react-native-cli

 

初始化項目

 

react-native init luckygoods

cd luckygoods

 

初始化過程比較久，耐心等待...

 

1，IOS

 

安裝Xcode，V7.0+

 

運行項目：npm run start

雙擊luckygoods/ios/luckygoods.xcodeproj，在xcode打開項目，command + R 運行虛擬機

當修改JS後，在虛擬器環境再次Command +R 便可刷新

 

2，Android

 

（1）安裝Android Studio

 

安裝完成後，進入SDK Manager，在SDK Platforms窗口中，選擇Show Package Details，而後在Android 6.0 (Marshmallow)中勾選以下選項：

• Google APIs
• Intel x86 Atom System Image、
• Intel x86 Atom_64 System Image
• Google APIs Intel x86 Atom_64 System Image
• Android SDK Build-Tools 23.0.1

 

（2）ANDROID_HOME環境變量

 

確保ANDROID_HOME環境變量正確地指向了安裝的Android SDK的路徑。

編輯~/.bash_profile文件，添加：

 

export ANDROID_HOME=/Users/zhenn/android-sdks

 

當即生效：

source ~/.bash_profile

使用echo $ANDROID_HOME檢查此變量是否已正確設置

 

（3）添加adb(android debugger bridge)命令

 

export PATH=/Users/zhenn/android-sdks/platform-tools:$PATH

查看$PATH

echo $PATH

顯示以下信息：

/Users/zhenn/android-sdks/platform-tools:/opt/local/bin:/opt/local/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

 

（4）運行、調試

 

USB鏈接手機，對於手機兩點要求：

• 務必開啓USB調試
• 不要使用小米系列手機，未知緣由致使沒法正常安裝

 

項目目錄執行react-native run-android，正常狀況下將安裝測試應用到手機。打開應用，便可看到react-native編寫的界面。

 

在更新js文件後，搖晃手機彈出menu，選擇reload，應用視圖即刷新。

另外，若選中遠程調試選項，則可在chrome端調試js，具體請參考chrome調試部分。

 

二，Chrome調試

 

先安裝chrome插件React Developer Tools

在項目目錄啓動react-native服務

 

$ cd ~/react-native-project

$ npm run start

 

在xcode中cmd + R構建項目並在虛擬機中啓動，經過CMD + 1/2/3/4，可調節模擬器分辨率

 

chrome瀏覽器新建tab，打開地址：http://localhost:8081/debugger-ui，將看到以下界面：

 

 

此時並無進入調試狀態，在js代碼中增長debugger，瀏覽器並不會響應。

要進入調試，須要在模擬器中開啓遠程調試

 

默認快捷鍵 control + command + z，點擊未彈出菜單，請檢查與其餘app的快捷鍵是否衝突

 

 

開啓遠程調試後，切換到chrome瀏覽器，調試狀態就會更新以下

 

 

接下來就跟調試web項目同樣，惟一區別是在瀏覽器不能呈現app視圖。

 

三，基本知識

 

1，響應用戶事件

 

可用事件列表

- onPress，按下屏幕並鬆開，至關於web中click

- onLongPress，按下不鬆開（長按）

- onPressIn，至關於touchstart

- onPressOut，至關於touchend

 

事件綁定必須寫在TouchableHighlight、TouchableOpacity、TouchableWithoutFeedback組件中方可生效，好比：

<TouchableHighlight onPress={this.pop} >

     <Image source={pic} style={styles.img} />

</TouchableHighlight>

 

TouchableHighlight 製做按鈕、連接，press時背景會改變

TouchableOpacity 用戶press時下降透明度，而非改變背景

TouchableWithoutFeedback 沒有任何視覺反饋

TouchableNativeFeedback

 

推薦使用第三種，其餘點擊效果都可經過第三種實現，利用onPressIn\onPressOut事件

 

2，樣式

 

基本樣式

width、height、marginLeft等

border等複合屬性不能直接用，須要拆分borderWidth、borderColor

 

面向元素自身

 

alignSelf屬性值

- flex-start 相似於float:left

- center

- flex-end 相似於float:right

 

面向子元素

• justifyContent 設爲center可垂直居中 
• alignItems: ‘center’ 會致使內部view不能自適應寬度，慎用

 

flex佈局

 

不存在float屬性，佈局靠flex、alignSelf實現

position依然可用，設置爲absolute時，務必設置zIndex大於1以上，不然會被普通組件遮擋

flexDirection 決定字元素排列方向，默認值爲column(列)，可選值爲row(行)

 

圖片自適應

 

經過resizeMode來適配圖片佈局，包括contain, cover, stretch

默認不設置模式等於cover模式

contain模式自適應寬高，給出高度值便可

cover鋪滿容器，可是會作截取

stretch鋪滿容器，拉伸

 

文本必須放到Text組件內，且Text內的樣式可被繼承

 

TouchableHighlight  可點擊區域組件

press的樣式定義方式，增長屬性 underlayColor="rgba(255,0,66,.5)"

 

borderRadius 只接受number，可設置四邊圓角，不能單獨單個角的弧度

borderTopLeftRadius 設置單個角弧度

 

 

3，網絡請求

 

let url = 'http://luckydog.game.pengpengla.com/goods/list';

    fetch(url, {
        method: 'GET',
        headers: {},
        // post方法可傳body
        // body: JSON.stringify({
        //     firstParam: 'yourValue',
        //     secondParam: 'yourOtherValue',
        // })
    }).then((res) => {
        return res.json();
    })
    .catch((error) => {
        console.warn("fetch error:", error);
    })
    .then((res) => {
        // 可操做json
        console.log(res);
    });

 

在iOS9.x中，須要修改info.plist支持http請求，紅色區域內爲新增字段。

 

 

4，上拉加載數據列表

 

listview

 

針對ios沒法配置多列listview問題，可經過調整數據格式實現，即多個數據項（item）合成單個數據項。

重要屬性：

     - onEndReached 滾動到底部的回調 —— 第一次渲染時數據不足一屏（好比初始值空的），此事件也會觸發

     - onEndReachedThreshold 觸發onEndReached的閾值，距底部的距離

     - removeClippedSubviews 超出視圖範圍的組件是否移除，默認爲true，必須配合item的overflow:hidden，不然沒法生效，結果就是listview加載大數據列表時特別容易引發崩潰.

 

 

 

5，視圖跳轉——Navigator

 

http://www.javashuo.com/article/p-zkphcfpb-gs.html

 

6，經常使用三方組件

 

通信錄

react-native-contacts

 

本地持久化存儲

react-native-storage

 

通用版ViewPagerAndroid   

rn-viewpager

 

7，最小兼容的分辨率

 

iOS：320，設計稿640 * X

android：360，設計稿720 * X

 

➜  luckygoods git:(master) ✗ npm install --save react-native-wechat-android

➜  luckygoods git:(master) ✗ react-native link react-native-wechat-android

rnpm-install info Linking react-native-wechat-android android dependency

rnpm-install info Android module react-native-wechat-android has been successfully linked