• 使用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. OpenCV在Android平台上的应用

    今年8月份, OpenCV 2.3.1发布了. 虽然从2.2开始, OpenCV就号称支持Android平台, 但真正能让OpenCV在Android上运行起来还是在2.3.1版本上. 在这个版本上, ...

  2. 转:java两个jre目录和三个lib目录

    lib目录下放置着jar包.程序中的import语句找的就是这些文件!例如:import javax.servlet.RequestDispatcher;    问题在于,在cmd模式下编译,系统会提 ...

  3. Xcode插件开发

    一.安装模板 1.git clone https://github.com/kattrali/Xcode-Plugin-Template.git 2.cd Xcode-Plugin-Template ...

  4. ubuntu下android源码下载

    步骤一: 首先保证你的ubuntu系统电脑可以顺利游览google,我们是将etc下 hosts替换掉,推荐hosts: http://laod.cn/hosts/2015-google...host ...

  5. JVM参数配置

    JVM参数配置 设置堆大小 -Xms 初始堆大小 -Xmx 最大堆大小 -Xmn 设置年轻代大小 设置每个线程堆栈大小 -Xss 设置每个线程的堆栈大小 设置年轻代大小 -XX:NewSize= -X ...

  6. maximum-gap(经过了提示)

    下面的分桶个数做的不太好,原来的解法是用的 int gap = (big - small) / vlen; if (gap == 0) { gap = 1; } 下面是现在的Java解法: packa ...

  7. Difference between 2>&-, 2>/dev/null, |&, &>/dev/null and >/dev/null 2>&1

    Reference link: http://unix.stackexchange.com/questions/70963/difference-between-2-2-dev-null-dev-nu ...

  8. 配置hibernate根据实体类自动建表功能

    Hibernate支持自动建表,在开发阶段很方便,可以保证hbm与数据库表结构的自动同步. 如何使用呢?很简单,只要在hibernate.cfg.xml里加上如下代码 Xml代码<propert ...

  9. UVa 11235 (RMQ) Frequent values

    范围最值问题,O(nlogn)的预处理,O(1)的查询. 这个题就是先对这些数列进行游程编码,重复的元素只记录下重复的次数. 对于所查询的[L, R]如果它完全覆盖了某些连续的重复片段,那么查询的就是 ...

  10. Android下fragment切换的动画效果

    网上看到的例子,转过来记录一下,学习一下,感谢原作者的辛勤编码,效果非常好 基于Android3.0新增的动画api,效果很赞 共21种动画效果: <item>X轴缩放</item& ...