介紹
1.現有項目集成ReactNative
2.js文件的簡單介紹,常用工具的封裝
3.真機調試
4.打包成jsbundle文件
一.現有項目集成ReactNative(手動集成)
- 在項目根目錄下創建package.json文件
package.json內容填寫
{
"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- 添加依賴項目(在項目下創建Libraries文件夾,添加node_modules下的需要的項目)
添加依賴項目.png
- 添加依賴庫
添加依賴庫.png
- 搜索路徑下添加
$(SRCROOT)/node_modules/react-native/React
header search paths.png
- 填寫XCode的鏈接器參數
Other linker flags
Other linker flags.png
- 修改info
info.png
好了,到這里手動集成就完成了...
二.js文件的簡單介紹,常用工具的封裝
在項目根目錄下創建一個文件夾,存放所有.js文件
js文件夾.png
- 引入react-native模塊
- 定義需要的對象(AppRegistry,StyleSheet,View更多的可以參考API)
- 使用React.createClass創建一個組件,用render方法試圖渲染
- 用StyleSheet.create創建樣式表
- 使用了名為AppRegistry的內置模塊進行了“注冊”操作
1.png
2.png
3.png
“注冊”AppRegistry.registerComponent('Test', () => Load);
- 關于網絡數據獲取,這里我使用的是fetch
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
創建一個網絡請求js文件(NetWork.js)
// 注冊hearURL
let registHeadUrl = 'https://********/'
module.exports = {
// get 請求
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)
});
},
// -----------------------------------------------注冊-----------------------------------------
// 1. 驗證手機號是否存在(解析exists字段)
verifyUserMobile:function (phone,callBack,failure) {
var url = registHeadUrl+'user_exists?mobile='+phone;
console.log(url);
this.fetchWork(url,callBack,failure);
},
// 2. 獲取驗證碼(根據手機)
postMobileVerify:function (phone,callBack,failure) {
var url = registHeadUrl+'sms'
var body = {mobile:phone}
this.fetchPostWork(url,body,callBack,failure)
},
// 3. 注冊
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. 修改個人頁面
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)
}
};
其他文件調用網絡請求類.png
使用.png
- 在ViewController中安置一個按鈕,點擊跳轉到登錄界面(load.js)
viewcontroller.png
在ViewController.m中導入#import <RCTRootView.h>
在對應的方法中修改代碼
- (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
三.真機調試
- 把localhost改為你的電腦的IP。在Mac系統下，你可以在系統設置/網絡里找到電腦的IP地址
- 確認手機和電腦是在同一個無線網下面
-
把手機插上數據線，連接到你的電腦，這時候就可以在調試設備里，看到你自己的設備
真機調試.png
四.打包成jsbundle文件
- 在項目根目錄下創建一個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 - 把assets文件夾和main.jsbundle添加到項目,并修改代碼
修改URL.png
好了,基本到這就完成了!
最后,關于CocoaPods集成:ReactNative
1.創建package.json文件,內容同上
2.npm install
vim podfile.png
pod install.png
