關(guān)于iOS集成ReactNative 那些事

介紹

1.現(xiàn)有項(xiàng)目集成ReactNative
2.js文件的簡單介紹,常用工具的封裝
3.真機(jī)調(diào)試
4.打包成jsbundle文件

一.現(xiàn)有項(xiàng)目集成ReactNative(手動(dòng)集成)

  • 在項(xiàng)目根目錄下創(chuàng)建package.json文件
package.json內(nèi)容填寫
{
    "name": "Test",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "~15.4.1",
        "react-native": "0.42.3"
    },
    "devDependencies": {
        "babel-jest": "19.0.0",
        "babel-preset-react-native": "1.9.1",
        "jest": "19.0.2",
        "react-test-renderer": "~15.4.1"
    },
    "jest": {
        "preset": "react-native"
    }
}
  • 在根目錄下npm install
  • 添加依賴項(xiàng)目(在項(xiàng)目下創(chuàng)建Libraries文件夾,添加node_modules下的需要的項(xiàng)目)
添加依賴項(xiàng)目.png
  • 添加依賴庫
添加依賴庫.png
  • 搜索路徑下添加$(SRCROOT)/node_modules/react-native/React
header search paths.png
  • 填寫XCode的鏈接器參數(shù)Other linker flags
Other linker flags.png
  • 修改info
info.png

好了,到這里手動(dòng)集成就完成了...

二.js文件的簡單介紹,常用工具的封裝

在項(xiàng)目根目錄下創(chuàng)建一個(gè)文件夾,存放所有.js文件

js文件夾.png
  • 引入react-native模塊
  • 定義需要的對(duì)象(AppRegistry,StyleSheet,View更多的可以參考API)
  • 使用React.createClass創(chuàng)建一個(gè)組件,用render方法試圖渲染
  • 用StyleSheet.create創(chuàng)建樣式表
  • 使用了名為AppRegistry的內(nèi)置模塊進(jìn)行了“注冊(cè)”操作
1.png
2.png
3.png

“注冊(cè)”AppRegistry.registerComponent('Test', () => Load);

  • 關(guān)于網(wǎng)絡(luò)數(shù)據(jù)獲取,這里我使用的是fetch
    https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API 
創(chuàng)建一個(gè)網(wǎng)絡(luò)請(qǐng)求js文件(NetWork.js)
// 注冊(cè)hearURL
let registHeadUrl = 'https://********/'
module.exports = {
    // get 請(qǐng)求
    fetchWork:function (url,callBack,failure) {
        fetch(url)
            .then((response) => response.json())
            .then((jsonData) => {
                // console.log(url + jsonData);
                callBack(jsonData)
            }).catch((error) => {
            failure(error);
        });
    },
    fetchPostWork:function (url,body,callBack,failure) {
        fetch(url, {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(body)
        }).then(function(res) {
            if (res.ok) {
                res.json().then(function(data) {
                    callBack(data);
                });
            } else if (res.status == 401) {
                failure('401');
            }
        }, function(e) {
            failure(e)
        });
    },
    fetchPutWork:function (url,body,callBack,failure) {
        fetch(url, {
            method: "PUT",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(body)
        }).then(function(res) {
            if (res.ok) {
                res.json().then(function(data) {
                    callBack(data);
                });
            } else if (res.status == 401) {
                failure('401');
            }
        }, function(e) {
            failure(e)
        });
    },
    fetchPutWithData:function (url,formData,callBack,failure) {
        fetch(url, {
            method: "PUT",
            body: formData,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then(function(res) {
            if (res.ok) {
                res.json().then(function(data) {
                    callBack(data);
                });
            } else if (res.status == 401) {
                failure('401');
            }
        }, function(e) {
            failure(e)
        });
    },
    // -----------------------------------------------注冊(cè)-----------------------------------------
    // 1. 驗(yàn)證手機(jī)號(hào)是否存在(解析exists字段)
    verifyUserMobile:function (phone,callBack,failure) {
        var url = registHeadUrl+'user_exists?mobile='+phone;
        console.log(url);
        this.fetchWork(url,callBack,failure);
    },

    // 2. 獲取驗(yàn)證碼(根據(jù)手機(jī))
    postMobileVerify:function (phone,callBack,failure) {
        var url = registHeadUrl+'sms'
        var body = {mobile:phone}
        this.fetchPostWork(url,body,callBack,failure)
    },
    // 3. 注冊(cè)
    registerNewUserWithName:function (nickname,pwd,phone,callBack,failure) {
        var url = registHeadUrl+'register'
        var body = {name:nickname,password:pwd,phoneNumber:phone}
        this.fetchPostWork(url,body,callBack,failure)
    },
    // 4. 修改個(gè)人頁面
    putUserInfo:function (userID,attact,callBack,failure) {
        var url = registHeadUrl+'users/'+userID
        this.fetchPutWork(url,attact,callBack,failure)
    },
    // 5. 更新頭像
    sendUserAvatar:function (userID,avatar,callBack,failure) {
        var url = registHeadUrl+'users/'+userID+'/avatar'
        var photo = {
            uri: avatar,
            type: 'image/jpeg',
            name: 'icon.jpg',
        };
        var data = new FormData()
        data.append('avatar', photo)
        this.fetchPutWithData(url,data,callBack,failure)
    }
};
其他文件調(diào)用網(wǎng)絡(luò)請(qǐng)求類.png
使用.png
  • 在ViewController中安置一個(gè)按鈕,點(diǎn)擊跳轉(zhuǎn)到登錄界面(load.js)
viewcontroller.png

在ViewController.m中導(dǎo)入#import <RCTRootView.h>
在對(duì)應(yīng)的方法中修改代碼

- (IBAction)loadClick:(id)sender {
    
    NSURL *jsCodeLocation = [NSURL
                             URLWithString:@"http://localhost:8081/ReactNative/load.bundle?platform=ios"];
    //    NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main.jsbundle" withExtension:nil];
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                         moduleName        : @"iPhoneBIM"
                         initialProperties : nil
                          launchOptions    : nil];
    UIViewController *loadVC = [[UIViewController alloc] init];
    loadVC.view = rootView;
    [self.navigationController pushViewController:loadVC animated:YES];
}

效果圖:

load .png

三.真機(jī)調(diào)試

  • 把localhost改為你的電腦的IP。在Mac系統(tǒng)下，你可以在系統(tǒng)設(shè)置/網(wǎng)絡(luò)里找到電腦的IP地址
  • 確認(rèn)手機(jī)和電腦是在同一個(gè)無線網(wǎng)下面

  • 把手機(jī)插上數(shù)據(jù)線，連接到你的電腦，這時(shí)候就可以在調(diào)試設(shè)備里，看到你自己的設(shè)備


    真機(jī)調(diào)試.png

四.打包成jsbundle文件

  • 在項(xiàng)目根目錄下創(chuàng)建一個(gè)release_ios文件夾
  • react-native bundle --entry-file ReactNative/load.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/
    jsbudle.png
  • 把a(bǔ)ssets文件夾和main.jsbundle添加到項(xiàng)目,并修改代碼
修改URL.png

好了,基本到這就完成了!
最后,關(guān)于CocoaPods集成:ReactNative
1.創(chuàng)建package.json文件,內(nèi)容同上
2.npm install

vim podfile.png
pod install.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容