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