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的人了,祝各位小伙伴玩的愉快!
目录
打赏
0
0
0
0
2
分享
相关文章
React音频播放器样式自定义全解析:从入门到避坑指南
在React中使用HTML5原生&lt;audio&gt;标签时,开发者常面临视觉一致性缺失、样式定制局限和交互体验割裂等问题。通过隐藏原生控件并构建自定义UI层,可以实现完全可控的播放器视觉风格,避免状态不同步等典型问题。结合事件监听、进度条拖拽、浏览器兼容性处理及性能优化技巧,可构建高性能、可维护的音频组件,满足跨平台需求。建议优先使用成熟音频库(如react-player),仅在深度定制需求时采用原生方案。
59 12
React Jsx语法入门
【8月更文挑战第13天】React Jsx语法入门
63 4
React 地图组件 Mapbox 入门指南
Mapbox 是一个强大的地图平台,提供丰富的地图数据和工具,支持多种开发语言和框架。本文介绍如何在 React 项目中使用 Mapbox,涵盖基础概念、安装配置、基本用法、常见问题及解决方法、高级用法等内容,并通过代码示例详细说明,帮助开发者提升地图应用的开发效率和用户体验。
291 2
React 图片轮播 Carousel:从入门到进阶
本文介绍了在 React 中实现图片轮播(Carousel)的方法,从基础安装和配置 `react-slick` 开始,逐步讲解了常见问题如图片路径、性能优化、自定义样式和交互处理,以及高级话题如动态数据加载和响应式设计。通过详细示例,帮助开发者避免易错点,提升轮播图的用户体验。
107 3
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
225 10
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
构建高效跨平台移动应用:React Native入门指南
【8月更文挑战第47天】在移动开发领域,React Native凭借其跨平台特性和高效的开发模式赢得了开发者的青睐。本文将通过一个简易的待办事项应用实例,带领读者快速入门React Native,并展示如何利用JavaScript和React框架构建具有原生性能的应用。我们将探讨环境配置、界面布局、状态管理和数据流,以及如何打包和发布您的应用。准备好,让我们开始React Native之旅!
102 20
React技术栈-React UI之ant-design使用入门
关于React技术栈中使用ant-design库的入门教程,包括了创建React应用、搭建开发环境、配置按需加载、编写和运行代码的步骤,以及遇到错误的解决方法。
83 2
React技术栈-React UI之ant-design使用入门
React 基础入门
【9月更文挑战第1天】本文详细介绍了由Facebook开发的JavaScript库React,涵盖环境搭建、基本概念、常见问题及解决方案。首先,通过安装Node.js、npm和Create React App快速搭建开发环境;接着,讲解了JSX、组件(包括函数和类组件)、state和props等核心概念;最后,针对JSX语法错误、state异步更新及props与state混淆等问题提供了具体的解决方法和示例代码,帮助读者更好地理解和应用React。
71 2
React基础入门之虚拟dom【一】
【8月更文挑战第14天】React基础入门之虚拟dom
63 0
React基础入门之虚拟dom【一】