目录
目录
文章目录
  1. ###概览
  2. ###Deco IDE

React Native 入门

2016.10.28 Shaowei_Teng React  热度 ℃

###概览

###Deco IDE

  • Deco IDE 是什么？The best IDE for building React Native apps is now free and open source.

  • 实时显示出你的代码变化。Search for existing open-source React Native components to accelerate your development. Each component has a convenient thumbnail preview to help you find the right one.Then insert the component with one click and customize.

  • 快速建立已经开源的组件，加速开发。Search for existing open-source React Native components to accelerate your development. Each component has a convenient thumbnail preview to help you find the right one.Then insert the component with one click and customize.

  • 工程目录示例

    • android/：在 Android Studio 打开你的项目或者构建项目所必须的文件。
    • ios/：在 Xcode 打开你的项目或者构建项目所必须的文件。
    • node_modules/：你的 RN 项目运行所需要的NPM包。
    • .flowconfig：如果你想要使用 FB 的 flow 语言（对JS进行静态检查），就需要使用这个配置文件。
    • .watchmanconfig：FB 的 Watchman 的配置文件，检测 RN 的包。
    • .gitignore：Default files for git to ignore。
    • index.ios.js：在 iOS 上运行 RN App 的入口文件。
    • index.android.js：在 Android 上运行 RN App 的入口文件。
    • package.json：描述项目和罗列需要的 npm 包依赖。

  • 使用步骤

    • Step 1: Download, install, and run Deco
    • Step 2: Create a new project
    • Step 3: Run iOS Simulator
    • Step 4: Open index.ios.js
    • Step 5: Insert component
    • Step 6: Adjust properties
    • Step 7: Have fun, and join our Slack channel!

  • 什么是 Deco 组件？

1
2
3
4
5
6
7
8
9
组件是高度复用的 JSX 模版，Deco 能自动添加组件到项目。
有些组件需要 npm 依赖，Deco 会自动下载这些依赖和导入到你的代码中。
组件插入这种方式也可能含有可调的特性（自动添加到属性面板）。
插入组件有两种方式：1、直接拖拽组件到你的代码中。2、在搜索面板点击插入。
移除组件：The easiest way to remove a recently-added component is with undo ⌘+z. You will need to manually remove npm dependencies from your package.json. If undoing isn't possible, there are three places to check for related code you need to delete:
In your JSX code, where you inserted the component's JSX
At the top of the file, you may need to remove any import statements that were added when the component was inserted
If any npm dependencies were installed when the component was inserted, remove them from the package.json.
  • 模拟器
1
2
3
4
5
	1、开启 RN Packager，Deco 会自动开启 RN Packager 当你开启模拟器，你也可以手动开启。
当 Packager 运行之后，你可以在 Deco 底部看到 packager output。
	2、开启 iOS 模拟器，你可以开启任何已经安装了的 iOS 模拟器通过点击模拟器按钮。
	3、开启 Android 模拟器。
	4、开启 Hot Reload，开启热加载，自动刷新 app 当有代码变化时。
  • Where can I learn React and React Native? We recommend following the Facebook’s official getting started documentation, and then going through this guide, React Native Express.