React Native入门遇到的一些问题

本文示例参考自《React Native第一课》

React Native官方文档中文版(含最新Android内容)

这里只大概记录下我的操作步骤和遇到的问题,一定要牢记下面这条:

如果你在Mac下遇到提示写入权限时,记得在命令前加上sudo

 

 

安装开发所需要的环境,参考这里>>

 

我所遇到的几个问题:

1) 安装brew

curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C/usr/local --strip 1

参考自 《Mac安装Brew》

2) 安装并激活nvm

参考官方文档:https://github.com/creationix/nvm#installation

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.28.0/install.sh | bash

激活nvm “. ~/.nvm/nvm.sh” 或 “source ~/.nvm/nvm.sh”

3) 安装react-native-cli,注意权限问题

sudo npm install -g react-native-cli

4) 初始化工程,贼慢

sudo react-native init hello
不知道什么原因,特别慢,下载那里一直就不停的左右\/来回切换,超过半个小时都没反应

5) 双击.xcodeproject报错(很抱歉这里我没有将出错的信息捕捉并截图保存)

sudo chmod -R 777 工程目录文件名   设置可读写的操作权限

6) 模拟器Command + R不刷新界面

参考:https://github.com/facebook/react-native/issues/306

7) 编码时提示样式属性设置错误,React Native目前支持的样式属性名

Valid style props : [    alignItems    alignSelf,    backfaceVisibility,    backgroundColor,    borderBottomColor,    borderBottomLeftRadius,    borderBottomRightRadius,    borderBottomWidth,    borderColor,    borderLeftColor,    borderLeftWidth,    borderRadius,    borderRightColor,    borderRightWidth,    borderStyle,    borderTopColor,    borderTopLetRadius,    borderTopRightRadius,    borderTopWidth,    borderWidth,    bottom,    color,    flex    flexDirection,    flexWrap,    fontFamily,    fontSize,    fontStyle,    fontWeigt,    height,    justifyContent,    left,    letterSpacing,    lineHeight,    margin,    marginBottom,    marginHorizontal,    marginLeft,    marginRight,    marginTop,    marginVertical,    opacity,    overflow,    padding,    paddingBottom,    paddingHorizontal,    paddingLeft,    paddingRight,    paddingTop,    paddingVertical,    position,    resizeMode,    right,    rotation,    scaleX,    scaleY,    shadowColor,    shadowOffset,    shadowOpacity,    shadowRadius,    textAlign,    textDecorationColor,    textDecorationLine,    textDecorationStyle,    tintColor,    top,    transform,    transformMatrix,    translateX,    translateY,    width,    writingDirection]

为了了解一下CSS在React Native的使用情况,比如如何设置多个属性等,我做了一些尝试,最终的效果如下图。代码在这里>>

 

<View style={[styles.container, styles.space,]}>

如果你想了解各个组件里面具体的实现及使用方法/属性,可以直接看相应的.js源码,如截图所示:

 

 

 

看上去挺简单的一些东西,其实坑也有不少,自己去动手就知道水的深浅了,有了它开发移动应用确实很爽了,简直就是爽歪歪了!but,你不要指望会使用它就结束了,至少你还是要去学下Objective-C/Swift/Cocoa以及Android/Java,不然如果之后你遇到官方没有暴露出来的底层组件,你昨办咧?等别人来帮你解决么,那只能祝你好运了 :)

 

各位有致于React Native的同学,在跳入这个坑之前,我觉得有还是有几项技能需要准备一下:

1、JavaScript 基本的语法要会,ES6你需要了解一下,不然看到类似下面的代码确定不会茫然吗

var {  AppRegistry,  ActivityIndicatorIOS,  Image,  ListView,  StyleSheet,  Text,  View,} = React;

还有一个就是JSX的问题,很多人觉得它“退步了”,怎么说呢,站在某种角度来看它,的确是这样。但从整体上来说,它是为了减少代码量和编码直观而创造的。比如React.createElement(xxx (后面还有很长的东东,属性啊,事件之类的),你用<View Style={} 就搞定了,这样看上去反而更简单。

 

2、flex-box的布局模型

A Complete Guide to Flexbox 这篇文章你一定不能错过,五星推荐,不过要注意的是并不是所有属性React Native都支持,支持的几个就是:flex、flex-direction、flex-wrap、justify-content、align-items、align-self

实际应用属性名时,多个单词从第二个单词开始,首字母全部大写,就变成了:flex、flexDirection、flexWrap、justifyContent、alignItems、alignSelf

 

3、了解一下React.js

React是一种思想,React js和React Native都是基于React的想法而实现的(组件化开发)。主要是因为web相对而言开发环境容易些、上手难度更低一些(我是搞Web的可完全没有贬低之意),你完全可以找个在线的编辑器,比如:http://jsfiddle.net/    http://codepen.io/,在网页里敲代码然后马上就能看到效果,总比你一直要抱着mac强吧。毕竟很多公司是不允许员工使用除公司外的电脑,外有GFW,内有公司各种屏蔽规则,WIFI限制/访问站点限制,之前查个资料豆瓣也被屏蔽了。好在运维也要看知乎,这个倒是没屏蔽,ORZ…

 

 

唠叨这些多,在拉勾网上已经看到一些公司开始招React Native的人了,祝各位小伙伴玩的愉快!

时间: 2024-10-10 02:11:20

React Native入门遇到的一些问题的相关文章

React Native入门-刘望舒

React Native入门(一)环境搭建与Hello World React Native入门(二)Atom+Nuclide安装.配置与调试 React Native入门(三)组件的Props(属性)和State(状态)

React Native 入门宝典

声明:该书的笔者为徐嬴老师,一名具有5年IOS开发经验,和两年RN开发经验的老司机. 原文可以在gitbook上找到 笔者只是为他的书中提的的一些列问题,进行有偿答疑. 有偿答疑.本书将持续保持更新,有关问题可以加群讨论. 正在上传...取消 简介 笔者在研究ReactNative过程中,发现其中文资料相对较少,已出版的大部分图书资料都已过时.Facebook中的ReactNative开发团队以每月更新一版的速度在向前推进版本. 为更好的让广大开发者快速入门ReactNative,笔者结合自身开

React Native入门(二)Atom+Nuclide安装、配置与调试

相关文章 React Native入门 前言 上一篇文章我们搭建了开发环境,并写了个Hello World.这一节我们来学习React Native的开发IDE:Atom+Nuclide的安装.配置与调试.本文所讲的内容只适用于Mac平台. 1.开发IDE选择 React Native的开发IDE有很多种,比如FaceBook 官方推荐的 Atom+Nuclide.Android Studio的同门WebStorm(收费).Sublime Text 3.Visual Studio Code和De

React Native入门(三)组件的Props(属性)和State(状态)

相关文章 React Native入门系列 前言 在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性.样式等等.同样的,React Native中的组件也有属性.样式和状态. 1.Props(属性) 组件创建时会设置一些参数来定制这个组件,这些参数就是属性,属性一旦设定,在组件的生命周期中就不会改变.下面拿Image的source属性和Text的onPress属性作为举例. Image的source属性 import React, {Component} from 're

React Native 入门基础知识总结

中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看看阮一峰老师的<ECMAScript 6 入门>这篇文章.里面涉及很多 ES6 的新特性.我之前也是看了阮老师的文章做了一些学习笔记 ES6 学习笔记. 1.环境搭建 环境搭建中文教程,点击跳转RN中文社区 :http://reactnative.cn/docs/0.40/getting-star

React Native入门(一)环境搭建与Hello World

前言 目前关于React Native的教程很多,官方文档写的也不错,但是感觉大部分教程写的不是很清楚,导致我各种碰壁.因此我来写一个简洁的教程.本篇文章基于React Native 0.43,只适用于用Windows平台的Android开发者. 1.配置React Native 首先我们要先来安装一些软件,如下所示. Chocolatey Chocolatey是一个Windows上的命令行包管理器,安装了Chocolatey就可以通过命令行来安装一些我们需要软件.我们打开cmd命令行程序使用如

React Native入门-实战解析(上)

来自Leo的原创博客,转载请著名出处 我的stackoverflow 概述 随着app端越来越复杂,迭代越来越快,很多app采用原生+html5的方式来实现,然后不知道什么时候,它就有了个高大上的名字 - hybrid app.类似的框架也很多,比较有名的有 Ionic PhoneGap 这种app的原理是,用webview来实现类似原生的界面,也就是用h5写的代码是运行在webview里的.优点很明显 动态部署(不需要每次通过应用商店的审核,尤其是iOS,审核有时候真的觉得两颗蛋不够疼的.)

《React Native入门与实战》读书笔记(1)

ReactNative介绍 它的底层引擎是JavaScript Core,调用的是原生组件而非HTML5组件(HTML+CSS+JavaScript构建的组件).运行时,可以做到与Native App媲美的体验,同时因为JavaScript代码可以使用后端强大的Web方式管理,既可以做到高效开发,也可以做到快速部署和问题热修复.React Native APP运行在客户的手机上,而控制端可以在后端,可以充分发挥Web的能力,就像一个牵线木偶,任凭你表演. 环境搭建 安装Node.js最新版本 h

React Native ——入门环境搭配以及简单实例

一.Homebrew 是OS X 的套件管理器. 首先我们需要获取 Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 1.我们可以先通过在终端输入: brew -v 如果没有安装就输入Homebrew的镜像路径去下载 2.拥有了brew,就可以通过它去下载一些依赖了,比如node,我们可以在终端输入:brew install node,如果