react-native 开发app之坑

最近在用rn开发一个类似于淘宝的app，说说遇到的坑。

坑一：

我们使用的是fetch请求的接口，有天后台让我们用put的方式和delete的方式请求接口，在网上各种查，无果。

开发app端，一般只用到了get和post的请求方式。

但是如果您们有用到delete的方式，那么我们就delete传值，post请求。

注意：直接url后面加上  /delete 即可，后台会做处理

let url = "http://127.0.0.1:8080/api/testFetch/delete”
let formData = new FormData();
formData.append("id","7BWE-EEAA-JFIO-DJAO");

etch(url , {
method: 'POST',
headers: {},
body: formData,
).then((response) => {
if (response.ok) {
return response.json();
}
).then((json) => {
alert(JSON.stringify(json));
).catch((error) => {
console.error(error);
);

坑二：

在rn中用fetch请求获取响应的数据更新组件的状态时，this.setState的this会丢失

componentWillMount: function() {
fetch(url).then(function(text) {
this.setState({state: text});
})
}

解决方案：

可以使es6的箭头函数()=>{} 箭头函数没有this 会向上查找 就会找到父级的this

componentWillMount: function() {
fetch(url)
.then((response) => response.json())
.then((res) => {
this.setState({state: text});
})
}

坑三：

因为我自己用的mac，在安装了一个模块以后。总报错。例如



打开xcode也报错



这些库都没加进去，而且link不了

原来是自己的脚手架问题，

解决方案：

命令行运行：yarn add react-native-cli

完美解决

坑四：

列表想要得到横线展示且换行设置了：flexDirection:’row’之后一直横向显示

解决方案：只要再设置一个flexWrap:’wrap’就OK了

脚注

有问题可以联系QQ:523015682