React Native入门遇到的一些问题

简介: 本文示例参考自《React Native第一课》 React Native官方文档中文版(含最新Android内容) 这里只大概记录下我的操作步骤和遇到的问题,一定要牢记下面这条: 如果你在Mac下遇到提示写入权限时,记得在命令前加上sudo     安装开发所需要的环境,参考这...

本文示例参考自《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的人了,祝各位小伙伴玩的愉快!
目录
相关文章
|
23天前
|
前端开发 JavaScript 开发者
React:JSX语法入门
React:JSX语法入门
24 0
|
2月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
2月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
3月前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
2月前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
2月前
|
前端开发 IDE 小程序
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
34 0
|
3月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
|
3月前
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
52 1
|
3月前
|
开发框架 Dart 前端开发
Flutter vs React Native:跨平台移动应用开发的终极对决
随着移动应用的普及,跨平台移动应用开发成为了一种趋势。Flutter和React Native是当前最受欢迎的跨平台开发框架之一,但它们各自有着不同的特点和优势。本文将对Flutter和React Native进行全方位比较,以帮助开发者了解两个框架的差异,从而选择适合自己的开发工具。
40 3
|
3月前
|
前端开发 JavaScript 索引
快速掌握 React 基础入门: 一个完整的指南(三)
快速掌握 React 基础入门: 一个完整的指南