琢磨react-native有一段时间了.对于我来说,它的确是前端开发工作者的福音,因为我可以利用它来写app的代码,而且基本可以一套代码,多个平台使用. 早就想写一篇随笔记录一下react native的学习历程了,可是最近在navigator(导航,可以理解为‘页面’跳转)这里遇到了一个比较棘手的问题,所以耽搁了两天,中途甚至产生过放弃的念头,还一度去看了ionic以及QT的demo,思前想后,经过对比,发现还是react-native比较自己.刚好今天也将困扰已久额问题解决了,心情大好啊.…

最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRequest 是一个设计粗糙的 API,不符合职责分离的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise 友好.而Fetch 的出现就是为了解决 XHR 的问题,所以react Native官方推荐使用Fetch API. fetch请求示例如下: return…

此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 API 的介绍与代码实战,以及 React Native 与 iOS.Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习. 书籍还配套了视频教程「80 节实战课精通 React Native 开发」,此视频课程建议配合书籍学习,书籍中原理性的东西讲解的比较清晰,而…

React Native FlatList 选中后 状态没有立即发生改变,而在下一次生效的问题 解决关键: 给 FlatList 添加 extraData={this.state} 非常关键,如果不设置点击就不会马上改变状态,而需要拖动列表或者下次渲染才会改变 解决方法参考: https://www.jianshu.com/p/e9144208f18f 本博客地址: wukong1688 本文原文地址:https://www.cnblogs.com/wukong1688/p/11205371.h…

效果图: 一步一步慢慢来: 其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏.无奈又在忙其他事情,导致这些现在才整理出来. 1.顶部导航栏:react-native-scrollable-tab-view:文档地址:https://github.com/skv-headless/react-native-scrollable-tab-view 2.底部导航栏:react-navigation中的TabNavigator:文档地址:https://reactnavigation.org…

很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这个简短的视频教程加深理解. 使用Fetch React Native提供了和web标准一致的Fetch API,用于满足开发者访问网络的需求.如果你之前使用过XMLHttpRequest(即俗称的ajax)或是其他的网络API,那么Fetch用起来将会相当容易上手.这篇文档只会列出Fetch的基本用…

今天是肿么了......一上班创建React Native项目,react-native run-ios运行就报错,运行不了...呜呜...... 一开始以为自己react-native run-ios命令敲错,再然后以为Xcode缓存,再然后以为电脑问题,关机重启...问题依然存在,好在解决了.... 报错截图: 上网查了很多资料没有找到解决方案,估计是react-native版本的问题. 查看package.json文件: 发现是0.45.0版本...我记得之前都是0.44的版本的.....…

import React from 'react'; import { View, Text,Button } from 'react-native'; import { DrawerNavigator,StackNavigator,TabNavigator } from 'react-navigation'; /* * 主屏幕,可以跳转至Tab Navigator和DrawerNavigator*/ const HomeScreen = ({ navigation }) => ( <View…

Navigator还是最常用的组件, 所以自己封装了一个, 使用起来也比较简单, 如下: 首先导入组件 var MLNavigator = require('../Lib/MLNavigator'); 然后使用 <MLNavigator leftIconName = 'nav_btn_back' title = '我的导航' rightIconName = 'nav_btn_back' rightTitle = '右边标题' callBackLeftClick = {()=> this.pop…

React Navigation 更新到版本5已经是非常完善的一套导航管理组件, 提供了Stack , Tab , Drawer 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈呢? 1 . 确定APP的整体风格,国外偏好使用Drawer布局, 但到了国内就很少被使用 2. 每个导航也是一个component, 可以作为另外一个导航的一个页面 其他的具体使用参考官网即可 import {createAppContainer} from 'react-navigation';…