React-Native 基础学习入门指南
Posted wzgiceman
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React-Native 基础学习入门指南相关的知识，希望对你有一定的参考价值。
React-Native 基础学习入门指南
背景
随着前端工程师这个名词的日益火爆，同时衍生出全栈前端工程师。对移动端开发来说无疑是多了另一种选择，而不久前的微信小程序无疑是打响了前端开发的号角，所以如果对前端还没有涉猎或者之前对前端开发怀疑和犹豫的人来说，是时候开始新一轮的学习了。
在研究了众多前段开发技术中，最后RN无疑是后起之秀，由facebook开源，更新速度和社区建设可以说是飞速吧，所以决定投身到RN大军中。
希望通过博客记录下学习RN中的一些坑并且督促自己不断学习，虽然暂时公司没有要求使用RN开发，未雨绸缪肯定没毛病。
搭建环境
React-Native开发工具WebStrome破解版 密码：xjyw
WebStrome可以直接将androidStuidio中的配置文件导入使用，界面和AndroidStudio基本一样，快捷键也相应的导入，使用过程和AS基本完全一样.
Hello Word
代码很简单主要是配置过程中可能出现各种问题，其中WebStrome默认不会自动创建工程目录结构，可以先通过原生AndroidStuidio创建一个项目运行成功后，通过WebStrome打开即可开始WebStrome新工程的开发。
//导入区： 样式-组件导入
import React, Component from 'react';
import AppRegistry, Text from 'react-native';
//代码区：逻辑代码
class HelloWorldApp extends Component
render()
return (
<Text style=FlexStyle.itemStle>Hello Wolrd wzg!!</Text>
);
//组件样式：相当于android原生layout-view属性
const FlexStyle = StyleSheet.create(
itemStle:
width:100,
height:100,
backgroundColor:"#F48D12",
borderStyle:"dashed",
borderColor:"#92D050",
borderWidth:5,
borderRadius:20,
flexGrow:1,
textAlign:"center",
textAlignVertical:"center"
)
// 注意，这里用引号括起来的'HelloWorldApp'必须和你 init 时创建的项目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);这个过程中可能会出现很多问题，可以查看以下问题解决方案：
JS语法
由于RN是通过JS语言开发，需要大体了解JS的使用，比较枯燥，其相当于Android原生中的Java语法
Flex 布局
Flex相当于Android原生中的四大布局布局Linearlayout/RelativeLayout...，所以也需要系统的学习
RN核心组件
可大体了解一些核心组件，在入门以后使用过程中继续研究更加重要组件，如果你有Android或者ios开发经验应该已经知道哪些是平常使用频率高的组件了。
fetch网络处理
fetch在RN中帮助和服务器交互数据，相当于原生Andnroid开发中的开源项目OkHttp/Retrofit....
三方库使用
归功于RN社区的开源技术们，一个庞大的开源社区正在壮大，而且已经有很多好的开源项目可以提供给RN使用
总结
RN作为一个新的方向，如果要全面详细的使用学习成本还是很大，而且学习过程比较枯燥，本篇只是帮助大家入门一些RN基础，所以提高和进阶还需要不断的学习。对于我个人来说完全没有涉猎过前段技术，但是总体学习下来感觉RN可能真的是以后移动开发的一个主流方向。所以有必要学习get这项技能，可能真的是大势所趋吧。
感谢
最后感谢以上链接的所有作者，提供了这么多好的学习资源，分享自己学习的经验。特别感谢我的老乡老马应该是他的文章带我入门RN，感谢开源！
以上是关于React-Native 基础学习入门指南的主要内容，如果未能解决你的问题，请参考以下文章