修改服务端口:adb reverse tcp:8081 tcp:8081
新增:yarn add react-devtools
启动项目:react-native run-android (安卓)
端口查询:netstat -aon
过滤端口:netstat -aon |findstr "8081"
RN:{
cli命令:{
初始项目:react-native init '项目名称',
启动项目(android):react-native run-android
},
手势事件:{
onPress:{
触发方法:点击
}
},
组件:{
视图滚动:{
ScrollView:短视图滚动,horizontal可以控制滚动方向,
FlatList:{
特点:长列表,
data:数据列表,
renderItem:单条数据
},
SectionList:{
特点:可带分组title,
sections:数据列表,
renderItem:分组数据,
renderSectionHeader:分组标题,
keyExtractor:分组关键字
}
}
},
// httpClient数据请求测试地址(get)https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json
Promise数据请求:{
方法:Fetch,
试例:fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue'
})
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
}),
method:数据请求方式,
headers:可传递头部信息比如token,
body:后台校验数据,或存储数据(通常需要先转换为字符串在传递),
catch:捕捉错误信息,
then(01):获取回台信息,并转换为前端所需JSON数据,
then(01):数据请求结束回调数据
},
async&await数据请求:{
方法:Fetch,
试例:async function getMoviesFromApi() {
try {
// 注意这里的await语句,其所在的函数必须有async关键字声明
let response = await fetch(
'https://facebook.github.io/react-native/movies.json',
);
let responseJson = await response.json();
return responseJson.movies;
} catch (error) {
console.error(error);
}
},
async:告知计算机此方法为异步请求,必要时需要挂起等待数据才可以操作数据,
await:告知计算机需要挂起等待数据,
try&catch:异常捕捉错误信息
},
WebSocket:{
作用:端对端的全双工数据请求,
试例:{
// 向目标机器发起数据连接
var ws = new WebSocket('ws://host.com/path');
ws.onopen = () => {
// 打开连接
ws.send('something'); // send a message
};
ws.onmessage = (e) => {
// 接受信息
console.log(e.data);
};
ws.onerror = (e) => {
// 错误提示
console.log(e.message);
};
ws.onclose = (e) => {
// 手动关闭连接
console.log(e.code, e.reason);
};
}
},
获取设备信息:{
Platform:{
地址:‘react-native’
设备类型:Platform.OS,
设备版本:Platform.Version
}
}
}