React-Native 基础学习入门指南

React-Native 基础学习入门指南

背景

随着前端工程师这个名词的日益火爆，同时衍生出全栈前端工程师。对移动端开发来说无疑是多了另一种选择，而不久前的微信小程序无疑是打响了前端开发的号角，所以如果对前端还没有涉猎或者之前对前端开发怀疑和犹豫的人来说，是时候开始新一轮的学习了。

在研究了众多前段开发技术中，最后

RN

无疑是后起之秀，由

facebook

开源，更新速度和社区建设可以说是飞速吧，所以决定投身到

RN

大军中。

希望通过博客记录下学习

RN

中的一些坑并且督促自己不断学习，虽然暂时公司没有要求使用

RN

开发，未雨绸缪肯定没毛病。

搭建环境

基础搭建-React-Native中文网环境搭建

Android原生APP中添加ReactNative 进行混合开发教程

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);

这个过程中可能会出现很多问题，可以查看以下问题解决方案：

React Native踩坑大全

JS

语法

由于

RN

是通过

JS

语言开发，需要大体了解

JS

的使用，比较枯燥，其相当于

Android

原生中的

Java

语法

ECMAScript 6简介

Flex

布局

Flex

相当于

Android

原生中的四大布局布局

Linearlayout/RelativeLayout...

，所以也需要系统的学习

阮一峰:Flex 布局

RN

核心组件

可大体了解一些核心组件，在入门以后使用过程中继续研究更加重要组件，如果你有

Android

或者

IOS

开发经验应该已经知道哪些是平常使用频率高的组件了。

React Native 中文网-核心组件

fetch

网络处理

fetch

在

RN

中帮助和服务器交互数据，相当于原生

Andnroid

开发中的开源项目

OkHttp/Retrofit....

fetch 更加高效地进行网络请求

React Native网络请求及UI展示

三方库使用

归功于

RN

社区的开源技术们，一个庞大的开源社区正在壮大，而且已经有很多好的开源项目可以提供给

RN

使用

React Native 引用第三方组件

React-Native填坑之删除第三方开源组件的依赖包

react-native-open-project

第三方开源项目-总结

总结

RN

作为一个新的方向，如果要全面详细的使用学习成本还是很大，而且学习过程比较枯燥，本篇只是帮助大家入门一些

RN

基础，所以提高和进阶还需要不断的学习。对于我个人来说完全没有涉猎过前段技术，但是总体学习下来感觉

RN

可能真的是以后移动开发的一个主流方向。所以有必要学习

get

这项技能，可能真的是大势所趋吧。

感谢

最后感谢以上链接的所有作者，提供了这么多好的学习资源，分享自己学习的经验。特别感谢我的老乡老马应该是他的文章带我入门

RN

，感谢开源！