文章目录

Vanessa

成为 B3log 赞助者

标签: React (6)

React Native 系列【五】View 滑动时禁止 WebView 滚动

SymApp ToC https://hacpai.com/article/1496906863683 https://hacpai.com/article/1497002998658 https://hacpai.com/article/1497406003289 https://hacpai.com/article/1497860440410 https://hacpai.com/article/1497235254333 知识点 想快速解决的请直接看最后一节的解决方案 StackNavigator Visual options Gesture Responder System WebView 问题描述 在使用 React Navigation 时, 虽然各个 View 切换的性能和效果都非常不错,也可以用 transitionConfig 很方便的进行自定义切换效果。但是如果你从一个原生的 React Native 页面点击后跳转到一个使用 WebView 的页面时,问题就来了。 iOS 下,当我在 WebView 中用从最左滑到右的手势想回到前一个 View 时,我的手....

React Native 系列【四】打包

SymApp Demo ToC https://hacpai.com/article/1496906863683 https://hacpai.com/article/1497002998658 https://hacpai.com/article/1497406003289 https://hacpai.com/article/1497235254333 Android 步骤 1 生成签名秘钥 keytool -genkey -v -keystore symapp-release-key.keystore -alias symapp -keyalg RSA -keysize 2048 -validity 10000 按照提示一路走下去 2 设置gradle变量 把 symapp-release-key.keystore 文件放到工程中的 SymApp/android/app 文件夹下 创建 ~/.gradle/gradle.properties 文件,添加如下的代码 MYAPP_RELEASE_STORE_FILE=symapp-release-key.keystore M....

React Native 系列【三】代码校验 (eslint)

SymApp Demo ToC https://hacpai.com/article/1496906863683 https://hacpai.com/article/1497002998658 https://hacpai.com/article/1497235254333 添加依赖 "devDependencies": { "babel-eslint": "^7.2.3", "eslint": "^4.0.0", "eslint-config-airbnb-base": "^11.2.0", "eslint-formatter-pretty": "^1.1.0", "eslint-plugin-import": "^2.3.0", "eslint-plugin-react": "^7.1.0", "eslint-plugin-react-native": "^2.3.2" }, 添加命令 "scripts": { "lint": "eslint . --fix --format=node_modules/eslint-formatter-pretty --quiet" } ....

React Native 系列【异常】

每每小伙伴出现类似问题,总是想不起来怎么解决的。开个贴记录下吧…. JavaScript Mobx + ListView 无法显示 当使用 mobx 的 observable 注解变量做为 ListView 的 DataSource 时,变量需要 slice() `` @observable categoryList = []; @computed get categoryDs() { const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); return ds.cloneWithRows(this.categoryList.slice());} ## iOS 一般react-native run-ios` BUILD FAILED 后,建议打开 Xcode 直接查看编译错误,然后针对性进行处理。 一般 log 最后只会显示如下,你需要去查看前面编译错误。如果你直接搜索了以下错误,当你跟着网上的步骤实施时,基本上都不能彻底解决。在不懂原理的背后去乱做一通,往往适得其反,....

React Native 系列【二】目录结构及依赖

Demo ToC https://hacpai.com/article/1496906863683 目录结构 根据自己的喜好分了下 SymApp |- test | |- android | |- app | | |- actions // 数据处理 | | |- components // 组件 | | |- config // 配置 | | |- images // 图片 | | |- screens // 屏幕视图 | | |- services // 服务 | | |- stores // 数据 | | |- styles // 样式 | | |- App.js // 入口 | |- ios 依赖 React Navigation官方推荐的,完美支持 Android 和 iOS mobx-react这个我还没太搞懂,但是想用一下。想了解的可以移步 https://mobx.js.org/ axios本来是准备用的,但是发现官方推荐 Using Fetch。 TODO…

React 入门实例教程

现在最热门的前端框架,毫无疑问是 React 。

上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。