React-Nativ 移动app开发

最新推荐文章于 2024-09-11 15:33:18 发布

weixin_34161083

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量111

点赞数

文章标签： javascript 移动开发前端 ViewUI

原文链接：https://segmentfault.com/a/1190000009207480

版权

React-Nativ

标签（空格分隔）： ReactNative

前景知识

nodejs react reactj
hybrid app (native + web)

环境搭建：ReactNative中文网： https://reactnative.cn/

npm（全称Node Package Manager，即node包管理器）.
react native 启动服务端：npm star

查看打包后的脚本 http://localhost:8081/index.a...

基础语法

React

What’s React

React是一个用于组建用户界面的JavaScript库，让你以更简单的方式来创建交互式用户界面。

当数据改变时，React将高效的更新和渲染需要更新的组件。声明性视图使你的代码更可预测，更容易调试。
构建封装管理自己的状态的组件，然后将它们组装成复杂的用户界面。由于组件逻辑是用JavaScript编写的，而不是模板，所以你可以轻松地通过您的应用程序传递丰富的数据，并保持DOM状态。
一次学习随处可写，学习React，你不仅可以将它用于Web开发，也可以用于React Native来开发Android和iOS应用

此处输入图片的描述
心得：上图是GitHub Popular的首页截图，这个页面是通过不同的组件组装而成的，组件化的开发模式，使得代码在更大程度上的到复用，而且组件之间对的组装很灵活。

Get Started

使用React之前需要在页面引入如下js库。

react.js
react-dom.js
browser.min.js

上面一共列举了三个react.js 、react-dom.js 和 browser.min.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，browser.min.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
你可以从React官网下载这些库，也可以将其下载到本地去使用。

使用Reac
解压从上述地址下载的压缩包，在根目录中创建一个包含以下内容的 “helloworld.html” 。


    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <script src="build/react.js"></script>
        <script src="build/react-dom.js"></script>
        <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
          ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.('example')
          );
        </script>
      </body>
    </html>

在 JavaScript 代码里写着 XML 格式的代码称为 JSX，下文会介绍。为了把 JSX 转成标准的 JavaScript，我们用<script type="text/babel">标签，然后通过Babel转换成在浏览器中真正执行的内容。

ReactDOM.render()
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

###JSX 
JSX 不是一门新语言，是个语法是一个看起来很像 XML 的 JavaScript 语法扩展。
每一个XML标签都会被JSX转换工具转换成纯JavaScript代码，使用JSX，组件的结构和组件之间的关系看上去更加清晰。
JSX并不是React必须使用的，但React官方建议我们使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。
JSX必须React上

在JSX中运行javascript代码，要使用****

var text = "shufu";
ReactDOM.render(
    <h1>text</h1>，
    document.getElemetByI("容器")
);




Usage:

React.render(//使用JSX
    <div>
        <div>
            <div>content</div>
        </div>
    </div>,
    document.getElementById('example')
); 
React.render(//不使用JSX
    React.createElement('div', null,
        React.createElement('div', null,
            React.createElement('div', null, 'content')
        )
    ),
    document.getElementById('example')
);

API和组件

创建组件3种方式：

ES6
ES5
方法的形式

组件生命周期

组件

React

作为UI
虚拟DOM
JSX (是一种在JavaScript中嵌入XML结构的语法.)
设计的JSX语法却是让你在代码中嵌入结构标记
EC6
前端知

React组

工具webstorm

fuwuqi

出现问题 [坑点]

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

一类的错误，其实仔细读错误日志就可以看得明白是没有assents目录，手动创建assents目录，之后再次执行上面这段命令行。

这里写图片描述

看样子是正确执行了

Watchman#
Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。

npm start

PropertyFinder@0.0.1 start /home/oren/projects/react-native/ReactNative-PropertyFinder
node_modules/react-native/packager/packager.sh

┌────────────────────────────────────────────────────────────────────────────┐
│ Running packager on port 8081. │
│ │
│ Keep this packager running while developing on any JS projects. Feel │
│ free to close this tab and run your own packager instance if you │
│ prefer. │
│ │
│ https://github.com/facebook/r... │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/home/oren/projects/react-native/ReactNative-PropertyFinder

React packager ready.

[12:00:54] <START> Building Dependency Graph
[12:00:54] <START> Crawling File System
ERROR A non-recoverable condition has triggered. Watchman needs your help!
The triggering condition was at timestamp=1443812455: inotify-add-watch(/home/oren/projects/react-native/ReactNative-PropertyFinder/node_modules/react-native/node_modules/module-deps/node_modules/detective/node_modules/escodegen/node_modules/.bin) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl
All requests will continue to fail with this message until you resolve
the underlying problem. You will find more information on fixing this at
https://facebook.github.io/wa...

{"watchmanResponse":{"version":"3.7.0","error":"A non-recoverable condition has triggered. Watchman needs your help!nThe triggering condition was at timestamp=1443812455: inotify-add-watch(/home/oren/projects/react-native/ReactNative-PropertyFinder/node_modules/react-native/node_modules/module-deps/node_modules/detective/node_modules/escodegen/node_modules/.bin) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctlnAll requests will continue to fail with this message until you resolventhe underlying problem. You will find more information on fixing this atnhttps://facebook.github.io/wa...n"}}
Error: A non-recoverable condition has triggered. Watchman needs your help!
The triggering condition was at timestamp=1443812455: inotify-add-watch(/home/oren/projects/react-native/ReactNative-PropertyFinder/node_modules/react-native/node_modules/module-deps/node_modules/detective/node_modules/escodegen/node_modules/.bin) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl
All requests will continue to fail with this message until you resolve
the underlying problem. You will find more information on fixing this at
https://facebook.github.io/wa...
t ChildProcess.<anonymous> (/home/oren/projects/react-native/ReactNative-PropertyFinder/node_modules/react-native/node_modules/sane/node_modules/fb-watchman/index.js:202:17)

at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at maybeClose (internal/child_process.js:817:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)

echo 256 | sudo tee -a /proc/sys/fs/inotify/max_user_instances
echo 32768 | sudo tee -a /proc/sys/fs/inotify/max_queued_events
echo 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches
watchman shutdown-server

weixin_34161083

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫