详细可参考 官方文档,这里进记录一些重要过程. 安装环境 下载 Android Studio 选择 Custom 进行安装: Android SDK Android SDK Platform Performance (Intel ® HAXM) (AMD 处理器看这里) Android Virtual Device 安装各 SDK,推荐使用 choce 进行安装,非常简单: powershell -NoProfile -ExecutionPolicy Bypass -Command "iex (…

首页完成效果展示: 一.开发占位图组件 在没有数据的时候使用占位图替代 items 的位置. 在 components 目录里创建 moviesItemPlaceholder.js import React, { Component } from 'react'; import { View, StyleSheet } from 'react-native'; import { px } from '../utils/device'; export default class MoviesIte…

路由管理使用官方推荐的 React Navigation; 配置环境 安装相关依赖 yarn add react-navigation react-native-gesture-handler Link 原生依赖 react-native link react-native-gesture-handler 修改 MainActivity.java package com.reactnativedouban; import com.facebook.react.ReactActivity; + i…

前言 React Native 是以实际像素 dp 为单位的,这导致在不同分辨率的屏幕会有不一样的显示情况. 在原生 Android 中,可以根据不同的分辨率添加不同的样式目录,以解决不同分辨率的问题. 在 web 中常见的屏幕适配方式是使用 rem.vw作为基本单位. 在微信小程序中,使用 rpx 作为屏幕适配单位,结合 px(实际像素)进行页面开发,一个屏幕的宽分为 750 份,每一份的长度则为 1rpx. 我们可以根据微信小程序的适配方案进行 App 的屏幕适配. React Native…

豆瓣评分的API接口 接口是从网上查找的,看样子应该是微信小程序里面扣出来的(ua 里面有 wechatdevtools) 接口都需要设置apiKey(054022eaeae0b00e0fc068c0c0a2102a)和 ua(Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 we…

什么是 redux redux 是一个用于管理 js 应用状态(state)的容器.比如组件 A 发生了变化,组件 B 要同时做出响应.常见的应用场景就是用户的登录退出操作:未登录状态,个人中心显示登录按钮,在登录页面进行了登录后,需要在个人中心页面做出相应,显示个人信息.类似的产品有: vuex.flux.dva.mobx. redux 常见为三个部分: Action:存放改变 Store 内容的方法,想要改变 Store 里面的数据,只能触发 Action 里面的相关方法: Reducer:…

首页内容拆分 看效果图,首页由热门影院.豆瓣热门.热门影视等列表组成,每个列表又由头加横向滑动的 电影海报列表构成. 所以可以先把页面的电影海报.评分.列表头做成组件,然后在使用 ScrollView 将内容包裹即可构成首页. 开发头部组件 头部组件结构简单,唯一需要注意的就是点击查看更多的时候需要跳转页面,所有需要一个自定义事件,供页面使用. 在 src 目录创建 itemsHeader.js,内容如下: import { Text, View, StyleSheet, TouchableWi…

添加依赖 yarn add react-native-vector-icons Link 依赖 react-native link react-native-vector-icons 使用默认字体图标 import Icon from 'react-native-vector-icons/AntDesign'; //可以选择AntDesign.FontAwesome.EvilIcons... <Icon name="search1" size={30} color="#…

React Native创建一个新项目: react-native init TestAndroidApp 提示:你可以使用--version参数(注意是两个杠)创建指定版本的项目.例如react-native init TestAndroidApp --version 0.44.3.注意版本号必须精确到两个小数点. 会在相应目录下创建一个TestAndroidApp的项目 这时使用编辑器打开新建项目,我使用的webstrom打开 这时会想,环境搭建好了,项目也创建完了,如何运行起来呢 第一:打…

React Native官方开发文档 以下是本人抄录的: 初次接触React Native感觉和React很像,却是有点类似,但不完全是,React Native有自己的组件对象,不过它也自定义的组件也是使用ES6中的语法定义. 首先是安装的依赖,必须安装:Node.React Native命令行工具.Python2 以及JDK和Android Studio. 开发的编辑可以根据自己喜好来,本人使用的时WebStorm,和Android Studio有点像. 1.Node.React Nativ…

移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的.然而现在有蛮多的公司开发App是基于React Native来开发的,这样可以做到一个App,就是一套代码,一个团队.对于公司来说,无疑节约了成本. <React Native开发>这系列的文章主要是记录本人利用React Native学习开发的笔记,这一篇文章是第一篇<搭建React Na…

搭建React Native开发环境 本文档是Mac下搭建的环境,针对的目标平台不同,以及开发 iOS 和 Android 的不同,环境搭建也有差异. Github地址:https://github.com/facebook/react-native 官方地址:http://facebook.github.io/react-native/docs/getting-started.html 中文版的地址:https://reactnative.cn/ 前提条件 Homebrew是OS X的套件(包…

步骤如下: 1.安装HomeBrew,命令如下: 在终端输入命令:$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 等待安装成功后验证一下brew的版本:$ brew -v 2.安装Nodejs 进入 https://nodejs.org/en/download/ 选择Mac的版本下载(node-v8.9.1.pkg),并且安装好. 验证Nodejs是否…

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

[React  Native 开发环境安装和配置:-bash: react-native: command not found 报错: 前提是安装homebrew,node.js ,npm ,watchman,flow都成功. 执行react-native init TestProject 命令 创建demo时报错:-bash: react-native: command not found 报错提示:Please include the following file with any supp…

一直觉得学习一样东西,不动手怎么也学不会,就像学习swift,看了视频没有动手操作,记住的也就那么点,自己写出东西不是这里有问题就是那里出错. 所以,以后学习自己要多动手. 现在我的学习任务就是: 提高自己的iOS代码专业能力,掌握Swift3.0,顺便学习学习React Native. 学习一门语言当然少不了硬件和软件设备啦,不然怎么学习...嘿嘿,对吧!!!! 下面记录下自己配置React Native开发环境: 1> 安装brew: 打开终端,输入:   /usr/bin/ruby -e…

我的电脑是windows 所以就以 windows上+Android 配置React native 环境 网上的安装教程非常多,我总结了一下,配置环境时出错原因主要是node java python c++  sdk 环境有问题,或者就是自己没有科学上网(你懂),网络有问题,导致了安装失败 至于如何安node java python c++ react-native-cli Android  sdk 我就不那么详细的说了,我主要说下我碰见的问题,想了解具体如何解决,点击这,还有这 node no…

目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料   一.前言 虽然只是简单的了解了一下React的皮毛,但是对React Native的学习就轻松了好多.所以在学习React Native之前,最好还是先学习一下React.因为我学习的iOS开发,对iOS更加了解,所以里面主要涉及到的平台也是iOS.   二.什么是React Native React Native是一款用来开发真正原生.可…

ReactNativeDemo 学习ReactNative开发,搭建ReactNative第一个项目 React Native 开发笔记 1.安装Homebrew $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2.安装wget.git.curl工具 //每次执行brew命令时,最好先执行brew update 或者 brew upg…

[React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19)  [React Native开发]React Native控件之Touchable*系列组件详解(18)  [React Native开发]React Native控件之ViewPagerAndroid讲解以及美团首页顶部效果实例(17) [React Native开发]React Native控件之Switch开关与Picker选择器组件讲解以及使用(16)  [React Nativ…

React Native开发的通讯录应用(使用JavaScript开发原生iOS应用,vczero) 0.前言: 项目地址:https://github.com/vczero/React-Native-App 欢迎大家提issues讨论任何问题,包括“试衣间”.... 一.项目介绍 基于React-Native & Node通讯录App (1)主要完成的功能有: 基于文件系统的Node.js服务端; 通讯录功能(分类页 + 列表页 + 拨号邮箱邮件) 公告功能(列表页 + 详情页) 通讯录和内容…

本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO XDE,不推荐使用DECO Snowflake.Pepperoni和Ignite是React Native iOS初学者的工具包 f8App主要提供了着手React Native开发的新手教程 React Developer Tools是一款Chrome Extension,可以检查React组件…

从网上翻阅了一些开发react-native的开发工具时,发现其实可选的工具还是比较多的Sublime Text,WebStrom,Atom+Nuclide,vs code 等.因为我用.net生态环境的ide比较多,所以当看到有vs code时,就毫无犹豫的选择了它作为react-native的开发工具. vs code是一个开源的,而且linux,windows,mac环境都可以支持,通过插件安装可以开发c#,java,php,js,html,css等. 本篇文章,就用来记录如何使用vs c…

React Native开发中自动打包脚本 在日常的RN开发中,我们避免不了需要将我们编写的代码编译成安装包,然后生成二维码,供需要测试的人员扫描下载.但是对于非原生的开发人员来说,可能不知如何使用Xcode或者Android studio来导出ipa.apk安装包,为了解决非原生开发的同学们打安装包的痛苦,这里作者就提供一个shell脚本文件来实现一键式自动打包并生成安装二维码 (这里上传安装包生成二维码需要借助于三方平台fir.im) 打包脚本文件下载地址 https://github.co…

(1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应用,却不知从何下手,我们只知道每一个人都希望做一款又酷又好玩儿体验又十分顺滑的应用,然而团队里没人有移动端的经验.于是,我们最终只好选择React Native作为我们的开发工具.结果证明,这是一个非常明智的选择,我们从开始到现在的所思所感. 2.使用 ListView 组件实现类似iPhone通讯…

(一).资讯 1.React Native 0.21版本发布,最新版本功能特点,修复的Bug可以看一下已翻译 重要:如果升级 Android 项目到这个版本一定要读! 我们简化了 Android 应用构建方式,Android 库现在通过 npm 和框架一起分发(不是 Maven).这意味着您需要运行 react-native upgrade 来升级您的 Android build(.gradle) 文件.这是一次性的修改. (二).技术文章 1.React Native API模块BackAnd…

DECO 一个REACT NAtive 开发IDE工具. 目前只支持 OS,NO WINDOWS https://www.decosoftware.com/ 一个方便的快速 ERXPRESS 教程:http://www.reactnativeexpress.com/    配套学习.…

Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的用户界面和非凡的功能,例如:迷你地图,多选择Python插件,代码段等等.完全可自定义键绑定,菜单和工具栏等等.漂亮的用户界面和非凡的功能,Sublime Text的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等. 1.下载安装Sublime 3 Sublime 3的下载地址: http://www.sublimetext.com/3 选着相应的平…

iOS开发——实战OC篇&环境搭建之Xib(玩转UINavigationController与UITabBarController)   前面我们介绍了StoryBoard这个新技术,和纯技术编程的代码创建界面,本篇我们将介绍一个老的技术,但是在很多的公司或者库里面还是使用这个技术,既然如此它肯定有他的好处,至于好处这里我就不一一介绍了.在Xcode5之前是只能使用Xib或者代码的,而代码又对于很多初学者来说算是一个难题.毕竟不知道怎么下手.所以我就总结了一下这段时间自己编写程序的一个实例来说明…

iOS开发——实战OC篇&环境搭建之纯代码(玩转UINavigationController与UITabBarController)   这里我们就直接上实例: 一:新建一个项目singleView Controller,命名未iCocos 二:由于我们使用的纯代码实现的,所以删除其中的StoryBoard和Viewtroller的两个文件 三:新建一个继承自TabBar Controller的类,我们命名问iCocos ViewController 三:在Appdelegate的实现文件中导入…