• 使用ES6語法編寫Component時綁定事件需要用this.MethodName.bind(this),否則MethodName中無法使用this

    <TouchableHighlight onPress={this.onPressButton.bind(this)}>
    <Text>Test</Text>
    </TouchableHighlight>
  • 使用ES6語法編寫方法,需要調用同類中的方法時,需要添加this前綴,否則會出現無法找到function錯誤
    getSomeVar(){
    return this.someVar;
    }
    testMethod(){
    return this.getSomeVar();
    }
  • node_gyp
    有些npm安裝包需要node_gyp,此程序需要先安裝python,  且只支持2.7版本 ,3.X是不支持的,安裝時注意將安裝目錄添加至PATH選項,如未勾選請自行加上
  • 運行github上面的項目example步驟:
    1.進入項目example目錄運行npm install
    2.運行 react-native upgrade
    3.如遇到__DEV__ is not defined 錯誤,請移除.babelrc裏的"presets": ["react-native"]
  • ListView刷新行數據需要注意點【PressRow】:
    1.新數據集需要先克隆
    2.修改行數據為對象時需要采用對像方式賦值,而且不是obj.propTest='Value'
    3.更新數據源採用this.setState方法
    pressRow(rowData, rowID){
    let newArray = this.state.itemData.slice(); //數組複製
    newArray[rowID] = { //對象式賦值
    ...this.state.itemData[rowID],
    ChangeValue: 'TestValue',
    };
    this.setState({ //更新數據源
    itemDataSource: this.state.itemDataSource.cloneWithRows(newArray),
    });
    }
  • 當ListView的dataSource數據來源為對像數組時,刷新整個數據需要對數組重新賦值,否則不會刷新頁面:
    方法1:

    let newArray=this.state.data.slice();
    for (var i = 0; i < newArray.length; i++) {
    newArray[i]={
    ...this.state.data[i],
    };
    }
    this.setState({
    dataSource:this.state.dataSource.cloneWithRows(newArray),
    });

    方法2:

    let newArray=JSON.parse(JSON.stringify(this.state.data));
    this.setState({
    dataSource:this.state.dataSource.cloneWithRows(newArray),
    });
  • 調試anrdoid時有時候Reload JS無效,這時候請關閉原來的JS Running窗口,執行 react-native start試試
  • 導入Class時需要注意導入類是否包含defalut,default為不帶括號,非default需要帶括號,否則有可能會引起錯誤
    import Games from './views/Games';
    import {Login} from './views/Login'; export default class Games extends Component {
    ..........
    } export class Login extends Component {
    }
  • ES6类中constructor 引用静态变量不会执行 New实例的时候会执行。
  • 第一个页面有獲得焦點的TextInput控件时,須在轉到第二個頁面前取消焦點,否則轉到第二个页面为Listview时绑定行必须要点两次才会触发
    注:用的是react-native-router-flux 中的 Actions.pageKey()方法.
  • react-native-store用for删除多笔带条件数据时,需要添加async和await,否则只会删除第一笔
    static async clearCart(items){
    for (let item of items) {
    await DB.Cart.remove({
    where:{
    and:[{id:item.ID}]
    }
    });
    }
    }

ReactNative 踩坑小计的更多相关文章

  1. Linux/Docker 中使用 System.Drawing.Common 踩坑小计

    前言 在项目迁移到 .net core 上面后,我们可以使用 System.Drawing.Common 组件来操作 Image,Bitmap 类型,实现生成验证码.二维码,图片操作等功能.Syste ...

  2. flutter 踩坑小计: amap_base 地图缩放 zoom 设置无效的问题

    这种问题估计也就我这种菜鸡能遇到了,因为我问了一些大佬,他们完全没遇到这类的问题. 如果你也遇到了,希望这篇文章能帮到你,倘若还不能解决你的问题,可以留言,我们共同研究. 问题:同样的插件,为什么偏偏 ...

  3. React-Native 踩坑过程

    踩坑过程: 解决方法就是去 SDK Manager 把 23.0.1 的版本下载了 而如果报错信息中含有bintray.com.gradle.org等网址,请***,反复重试,或者去react nat ...

  4. react-native 踩坑记

    最近在使用react-native的时候遇到了很多坑,这里给大家分享下 一.样式 react-native 虽然支持flex布局,但是所有的样式均是css样式的一个很小的集合,尤其是在安卓机下问题尤为 ...

  5. ReactNative踩坑日志——OnPress随着render()执行被自动调用?

    在ReactNative中,Text.Button以及其他Touchable包装成的可点击控件,都可以通过onPress属性为其指定点击时的响应函数. 在有些情况下,我们会把这些点击函数先定义好,然后 ...

  6. ReactNative踩坑日志——使用async/await语法解决网络请求的异步导致的指令执行顺序错乱问题

    转载请注明原文地址: ReactNative的fetch是天然的异步请求,因此,如果你在一个代码块中使用了fetch,那么在执行的时候程序不会等待网络响应结束才执行下一条代码,而是会直接按顺序执行完整 ...

  7. ReactNative踩坑日志——代码执行方式(面向对象)

    在ReactNative中,是以面向对象的方式执行代码的.处于同一{}內的代码以对象的形式执行,也就是说,程序虽然会自上而下执行代码,但是它会保证当前整个代码块內的语句执行完毕才执行下一代码块. 举个 ...

  8. ReactNative踩坑日志——如何实现删除scrollview中的视图

    在reactNative中,页面是根据state值的变化来重新渲染的.因此,传统的前端开发中通过 id 来移除一个页面元素的做法在这里不适用. 一般,我们是通过遍历数组或map来渲染出scrollvi ...

  9. React-Native踩坑记录二

    1.Image组件的borderRadius画圆有平台兼容性问题,在IOS下会失效 解决方法有几种 (1)在外面包裹一层View,对View组件使用borderRadius就可以了,这是我的做法 (2 ...

随机推荐

  1. laravel加载javascript库

    一篇文章: Generating a Link to a Javascript File Problem You want your Blade template to load an externa ...

  2. 即时通信Spark安装和配置

    spark:Cross-platform real-time collaboration client optimized for business and organizations.Spark i ...

  3. jpa-hibernate配置转换

    persistence.xml spring-demo-cfg.xml hibernate配置文件 Spring Data JPA:为简化JPA的开发提供帮助.EntityManager的创建与销毁. ...

  4. BZOJ3122 随机数生成器

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=3122 题意: 思路:(1)x1=t则n=1; (2)a=0,则b=t,n=2;否则无解: ...

  5. 方法Equals和操作符==的区别

    http://www.codeproject.com/Articles/584128/What-is-the-difference-between-equalsequals-and-Eq When w ...

  6. Parallel WebDriver executions using TestNG

    In this post, we will see how does one make use of TestNG to kick off parallel UI tests using WebDri ...

  7. hdu 1559 最大子矩阵 (简单dp)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1559 #include <cstring> #include <cstdlib> ...

  8. 函数fsp_alloc_from_free_frag

    /**********************************************************************//** Allocates a single free ...

  9. MVC的项目使用html编辑器UEditorMINI

    一个MVC的项目中有个发布新闻的页面需要用到一个html的编辑器,网上看到UEditor评价貌似还不错, 因为我用到的功能比较简单,就下载了MINI版本的, 使用的过程在这里总结一下. 关于UEdit ...

  10. js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件

    例如域名是  a.xx.com  和 b.xx.com    如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候  a包含b  为 ...