RN入门基础1：第一个RN项目-hello World

　

rn

1.新建工程，用webStorm创建一个react native项目

首先打开package.json,

因为webstorm会创建rn项目时会下载最新的react-native，所以运行程序到模拟器上，经常会出现各种红屏，

所以，将package.json的内容替换如下（里面是稳定版本的react-native和react-native cli）

{
  "name": "myprojectname",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.4"
  },
  "devDependencies": {
    "babel-jest": "23.4.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "23.4.1",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

然后点击左下角的install

有问题请参考

2.配置文件package.json,程序入口代码文件APP.js和index.js

基本代码分为四部分

1）组件导入区：     所有用到的组件都需要事先进行导入，包括样式也需要进行导入

2）核心代码区：     所有逻辑代码编写的地方

3）组件样式区：     render方法中返回一些用于渲染结构的JSX语句，render() 方法中用到的组件在这里编写

4）注册启动组件： 组件只有注册后才能运行。这里用到的 AppRegistry 也需要在组件导入区进行导入

注册并启动组件在index.js文件中，index是 Android 手机和 iOS 手机上程序开始的入口

代码解释：

定义了一个名为 myprojectname 的新的组件（component），

并且使用了名为 AppRegistry 的内置模块进行了“注册”操作

AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。

AppRegistry.registerComponent这个方法只会调用一次。只需整个复制到index.ios.js或是index.android.js

效果展示：

相关阅读

电商入门（1）：先从线下到线上说起

作为产品新人，该如何理解电商呢？一、初接触产品新人在初次接触电商时，会接触到一些抽象的概念，比如一级频道、二级频道、活动专题页、

创业公司，如何搭建项目管理流程

创业公司实现了0-1，但是怎么实现从1-100就需要内修好项目管理了。本文通过在公司搭建项目流程的角度对整个创业公司项目流程搭建进

陈玉丹：初学者入门《网络推广》必学内容

对于IT小白来说学习网络推广这块内容无疑是充满艰辛的，因为之前从事的职业与目前的网络推广工作可谓是八竿子都打不着的场子。but

真实日赚500的项目有哪些？干货分享

在这个钱不值钱的时代，想赚钱很容易，但是一定要找对方法。今天小编跟大家分享的几个项目都是可以真实赚钱的项目，而且收益不菲，有兴趣

C语言推荐书籍从入门到进阶带你走上大牛之路（珍藏版）

学习交流加（可免费帮忙下载CSDN资源）： 个人微信： liu1126137994 学习交流资源分享qq群1（已满）： 962535112 学习交流资源分享qq群2： 780