React-Native 基础学习入门指南

时间：2022-01-22 08:22:41

React-Native 基础学习入门指南

背景

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

在研究了众多前段开发技术中，最后RN无疑是后起之秀，由facebook开源，更新速度和社区建设可以说是飞速吧，所以决定投身到RN大军中。

希望通过博客记录下学习RN中的一些坑并且督促自己不断学习，虽然暂时公司没有要求使用RN开发，未雨绸缪肯定没毛病。

搭建环境

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，感谢开源！
标签：

相关文章