运行测试和贡献
React Native 回购有几个你可以运行的测试，来验证你没有用PR引起拟合。这些测试是用
持续集成系统运行的，并自动的向你的 PR 发布结果。你也可以在 IntegrationTest 和在 Xcode 中的 UIExplorer 应用中，使用 cmd+U 本地运行。您可以通过在命令行的 npm test 运行 jest 测试。但是我们目前还没有很大的测试覆盖率，所以大多数的变化仍将需要大量手工验证，但如果你想帮助我们提高我们的测试覆盖率，我们是非常欢迎的!
测试是 JS-only 测试，运行在节点命令行上。测试位于它们测试的文件 __tests__ 目录中，还有一个对不是位于故障隔离和最大速度测试下的积极模拟功能的强调。你可以用来自 react-native 根的 npm test 运行现有的 React Native jest 测试，并且我们鼓励你为你想做出贡献的任何组件添加你自己的测试。基本示例请看 getImageSource-test.js。
React Native 提供设施，使测试需要 native 和 JS 组件进行跨桥交互的集成组件更容易。两个主要组件是 RCTTestRunner 和 RCTTestModule。RCTTestRunner 设置了 React Native 环境并提供设备运行测试，正如在 Xcode 中的 XCTestCase(runTest:module 是最简单的方法)。RCTTestModule 和 TestModule 一样，通过 NativeModules 被导出到 JS 中。测试写在 JS 中，当它们完成时，必须调用 TestModule.markTestCompleted()，否则测试将超时失败。测试失败主要是通过抛出异常表示。它还可以用 runTest:module:initialProps:expectErrorRegex: 或 runTest:module:initialProps:expectErrorBlock: 测试错误条件，它预计抛出一个错误并验证错误与提供的标准相匹配。对于例子的使用，请看 IntegrationTestHarnessTest.js 和 IntegrationTestsTests.m。
常见的一种集成测试是快照测试。这些测试渲染一个组件，并使用 TestModule.verifySnapshot() 验证参考图像的屏幕快照，在幕后使用 FBSnapshotTestCase 库。参考图像通过在 RCTTestRunner 中设置 recordMode = YES 被记录下来，然后运行测试。快照在 32 位和 64 位系统中略有不同，且在不同的操作系统版本中也有所不同，所以建议你使用正确的配置运行测试。同时强烈建议所有网络数据被模拟，以及其他潜在的麻烦的依赖性。基本示例请看 SimpleSnapshotTest。React Native-调试篇
作者:fyales
理想的App开发流程是这样的:产品经理提出明确的需求，UI给出完美的设计图,API那边的接口已经完成，App开发一遍完成，测试部门一遍就过，没有任何错误。但是产品经理总是在改需求，UI那边也时不时改设计图，API那边经常不稳定,你自己写的代码也经常错误百出。所以，对于写App的我们来说，我们需要调试自己的代码。事实上，调试代码，修复Bug会占用你大量的时间，因此调试对每一个App开发者都是非常重要的一件事。今天我们就来讲一讲React Native的调试。
打开App内的开发菜单
在iOS中晃动设备或者在模拟器上按下control + ? + z
在Android中晃动设备。比如，在genymotion 中你可以通过按下? + m来模拟点击硬件菜单）。PC键盘上也有这个键，一般在标准键盘右边的Ctrl和右Windows键之间，即模拟鼠标右键的键。
App内置的调试菜单
一般的调试选项都在菜单里,具体的作用也可以从菜单项的名称看出一二。这里值得一提的是Hot Reloading和Live Reload的区别。这两项菜单的功能都是你只要保存一下原文件，那么App就会实时刷新。Live Reload是全局刷新，而Hot Reloading是局部刷新。
热刷新这样做有什么好处呢？举个例子，如果你现在调试的页面是个很深的页面，从打开app之后要点击好几次才能进到你想要调试的页面。这样就会浪费很多时间(虽然比重新编译程序，再让App跑起来要快很多)。这时候使用热刷新就会节省很多时间(Android Studio2以后的Instant Run也有类似功能)。
Chrome开发工具
在开始你的调试之旅之前，你最好下载一个Chrome插件React Developer Tools，这样会更方便你的调试。需要在开发菜单中选择Debug JS Remotely，这会打开一个新的http://localhost:8081/debugger-uitab页。在Chrome中，按下? + option + i或者选择视图(View) -& 开发者(Developer) -& 开发工具(Developer Tools)来打开开发工具控制台。打开有异常时暂停（Pause On Caught Exceptions）选项，能够获得更好的开发体验。
打开的Debugger
在这里需要提一下的是Chrome中并不能直接看到App的用户界面，而只能提供console的输出，以及在sources项中断点调试js脚本。因此，我们在开发控制台一般就做上面两件事
输出日志。利用console，对于Android开发者，console可能比较陌生；对于js开发者来讲，这是他们调试代码最基本的工具。其实它的作用就是Android中所用的Log类。Console的用法十分简单，像这样
console.log('The info is ' + info);
打断点。请在debuggerWorker.js目录下找到需要打断点的文件，别问我怎么知道的。宝宝我会告诉你我找打断点的地方找了一天么。之后你所要做的事情就是像一般调试流程一样进行调试就行了。
关闭开发者选项
当你的App写完正式发布之后,你就需要关闭开发者选项了，你可以通过以下的操作关闭开发者选项:
对于iOS来说，在Xcode中打开你的项目，选择Product → Scheme → Edit Scheme... (或者按下? + &)。接着选择菜单上左边的Run，然后将构建设置(Build Configuration)更改为Release.
在Android中，默认情况下gradle的release版本（比如使用gradle的assembleRelease任务来构建）就会关闭开发者菜单。你也可以通过给
ReactInstanceManager#setUseDeveloperSupport传递需要的参数来定制这一行为。
React Native除了可以利用chrome进行调试，也可以用Atom的插件Nuclide进行调试，感兴趣的可以访问其官网，功能比Chrome DevTools强大很多，估计很快就会取代后者。
React Native中文 调试史安平是一个对编程,吉他,美食,中医,健身充满了喜爱的废材,但他没有放弃,依然孜孜不倦的行走在路上,探寻生命的意义 - 欢迎来到我的博客
当前位置：
react-native开发环境搭建 超详细 亲测可行
react-native开发环境搭建 超详细 亲测可行
字体大小: [
今天介绍下recat native这个东东，它是facebook出的一个工具，实现了用js来开发原生手机app的功能，包括ios和android，我在几个月前曾尝鲜般的写了个简单的界面，用起来还算不错，尤其是界面布局上很是方便 它的布局邮箱像web开发中的css，他们自己叫jsx（好像是这样）就是用xml的格式就能很简单的描述界面 学习recat native可以不需要学习java或java布局（线性、相对布局等）recat native 可以用js比较轻松的写出列表框加载数据，图片滚动，下拉刷新，tarbar选项卡，导航控制器等。下面介绍下这个东西的安装，对伊第一次安装的网友还是有点麻烦的。& & & & 本次搭建环境 win7 64位。&&&&&&&&首先我们安装 java开发环境和android studio开发环境 可以看这篇文档，说的比较详细&&&&&&&&&然后安装nodejs （？为什么，用js开发 当然需要用node，node是什么可以自行百度，简单的说就是一个js开发环境）&&&&&&&&图解：注意，目前已知Node 7.1版本在windows上无法正常工作，请避开这个版本！&&&&&&&&& & nodejs 下载安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。npm&config&set&registry&https://registry.npm.taobao.org&--global
npm&config&set&disturl&https://npm.taobao.org/dist&--global& & 使用方法 ： 打开运行cmd &切换到node安装目录下 cd d:
ode &然后执行上面的两句话即可。& & 接下来安装pyhton2.7 步骤如下：&&&&PS:根据官方所说 目前recat native&目前不支持Python 3版本。React Native目前需要Android Studio2.0或更高版本&Android Studio需要Java Development Kit [JDK] 1.8或更高版本& & 安装react-native-cli 打开cmd 切换到node安装目录下 运行&npm install -g yarn react-native-cli && & 发现报错 ：UNABLE_TO_VERIFY_LEAF_SIGNATURE &查找了下问题 需要关闭ssl验证 在cmd执行 这一句& &&npm config set strict-ssl false&& & 然后在执行&npm install -g yarn react-native-cli&& & 然后打开 android studio ,必须安装好模拟器和sdk 这个在android studio安装过程自动勾选了的，如果安装时你取消过，需要安装上& &&& & 安装&在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。（必须是这个版本& &&& & 安装好以后&在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。【注意安装这些都需要科学上网】&&&&安装完成后设置两个环境变量&1.ANDROID_HOME环境变量确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 ->新建&2.将Android SDK的Tools目录添加到PATH变量中#你可以把Android SDK的tools和platform-tools目录添加到PATH变量中，以便在终端中运行一些Android工具，例如android avd或是adb logcat等。打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 选中PATH -> 双击进行编辑注意你的具体路径可能和下图不同&& & 到这里就安装配置的差不多了，在打开我们刚才的cmd 切换到node安装目录下 然后执行下面的。测试demo安装react-native&init&AwesomeProject
cd&AwesomeProject
react-native&run-android有个常见的问题是在你运行react-native run-android命令后，Packager可能不会自动运行。此时你可以手动启动它& &&& & 手动运行Packager 将会打开模拟器运行app并显示cd&AwesomeProject
react-native&start& &&如果你碰到了ERROR Watcher took too long to load的报错，请尝试将这个文件中的MAX_WAIT_TIME值改得更大一些 (文件在node_modules/react-native/目录下)。& 最后：&&修改项目现在你已经成功运行了项目，我们可以开始尝试动手改一改了：使用你喜欢的文本编辑器打开index.android.js并随便改上几行按两下R键，或是用Menu键（通常是F2，在Genymotion模拟器中是?+M）打开开发者菜单，然后选择 Reload JS 就可以看到你的最新修改。在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。完成了！恭喜！你已经成功运行并修改了你的第一个React Native应用。&& 环境就安装完了，下一篇小安介绍下如何实战开发一个界面 我当时也只做了这么多，一个小说列表带导航条 tarbar和滚动图的界面。
本文来自：绵阳史安平个人博客.励志于每一位朋友
欢迎转载，转载请注明本文链接:
/arc-8860.html
猜你也喜欢的：React 测试入门教程 - 阮一峰的网络日志
React 测试入门教程
越来越多的人，使用开发Web应用。它的测试就成了一个大问题。
React的组件结构和JSX语法，不适用传统的测试工具，必须有新的测试方法和工具。
本文总结目前React测试的基本做法和最佳实践，手把手教你如何写React测试。
一、Demo应用
请先安装。
$ git clone /ruanyf/react-testing-demo.git
$ cd react-testing-demo && npm install
$ npm start
然后，打开 http://127.0.0.1:8080/，你会看到一个 Todo 应用。
接下来，我们就要测试这个应用，一共有5个测试点。
应用标题应为"Todos"
Todo项的初始状态（"未完成"或"已完成"）应该正确
点击一个Todo项，它就反转状态（"未完成"变为"已完成"，反之亦然）
点击删除按钮，该Todo项就被删除
点击添加按钮，会新增一个Todo项
这5个都已经写好了，执行一下就可以看到结果。
$ npm test
下面就来看，测试用例应该怎么写。测试框架我用的是Mocha，如果你不熟悉，可以先读我写的。
二、测试工具库
React测试必须使用官方的，但是它用起来不够方便，所以有人做了封装，推出了一些第三方库，其中Airbnb公司的最容易上手。
这就是说，同样的测试用例至少有两种写法，本文都将介绍。
官方测试工具库的写法
Enzyme的写法
三、官方测试工具库
我们知道，一个React组件有两种存在形式：虚拟DOM对象（即<ponent的实例）和真实DOM节点。官方测试工具库对这两种形式，都提供测试解决方案。
Shallow Rendering：测试虚拟DOM的方法
DOM Rendering: 测试真实DOM的方法
3.1 Shallow Rendering
Shallow Rendering （浅渲染）指的是，将一个组件渲染成虚拟DOM对象，但是只渲染第一层，不渲染所有子组件，所以处理速度非常快。它不需要DOM环境，因为根本没有加载进DOM。
首先，在测试脚本之中，引入官方测试工具库。
import TestUtils from 'react-addons-test-utils';
然后，写一个 Shallow Rendering 函数，该函数返回的就是一个浅渲染的虚拟DOM对象。
import TestUtils from 'react-addons-test-utils';
function shallowRender(Component) {
const renderer = TestUtils.createRenderer();
renderer.render(&Component/>);
return renderer.getRenderOutput();
第一个，是测试标题是否正确。这个用例不需要与DOM互动，不涉及子组件，所以使用浅渲染非常合适。
describe('Shallow Rendering', function () {
it('App\'s title should be Todos', function () {
const app = shallowRender(App);
expect(app.props.children[0].type).to.equal('h1');
expect(app.props.children[0].props.children).to.equal('Todos');
上面代码中，const app = shallowRender(App)表示对App组件进行"浅渲染"，然后app.props.children[0].props.children就是组件的标题。
你大概会觉得，这个属性的写法太古怪了，但实际上是有规律的。每一个虚拟DOM对象都有props.children属性，它包含一个数组，里面是所有的子组件。app.props.children[0]就是第一个子组件，在我们的例子中就是h1元素，它的props.children属性就是h1的文本。
第二个，是测试Todo项的初始状态。
首先，需要修改shallowRender函数，让它接受第二个参数。
import TestUtils from 'react-addons-test-utils';
function shallowRender(Component, props) {
const renderer = TestUtils.createRenderer();
renderer.render(&Component {...props}/>);
return renderer.getRenderOutput();
下面就是测试用例。
import TodoItem from '../app/components/TodoItem';
describe('Shallow Rendering', function () {
it('Todo item should not have todo-done class', function () {
const todoItemData = { id: 0, name: 'Todo one', done: false };
const todoItem = shallowRender(TodoItem, {todo: todoItemData});
expect(todoItem.props.children[0].props.className.indexOf('todo-done')).to.equal(-1);
上面代码中，由于是的子组件，所以浅渲染必须在TodoItem上调用，否则渲染不出来。在我们的例子中，初始状态反映在组件的Class属性（props.className）是否包含todo-done。
3.2 renderIntoDocument
官方测试工具库的第二种测试方法，是将组件渲染成真实的DOM节点，再进行测试。这时就需要调用renderIntoDocument 方法。
import TestUtils from 'react-addons-test-utils';
import App from '../app/components/App';
const app = TestUtils.renderIntoDocument(&App/>);
renderIntoDocument 方法要求存在一个真实的DOM环境，否则会报错。因此，测试用例之中，DOM环境（即window, document 和 navigator 对象）必须是存在的。 库提供这项功能。
import jsdom from 'jsdom';
if (typeof document === 'undefined') {
global.document = jsdom.jsdom('&!doctype html>&html>&body>&/body>&/html>');
global.window = document.defaultV
global.navigator = global.window.
将上面这段代码，保存在test子目录下，取名为 。然后，修改package.json。
"scripts": {
"test": "mocha --compilers js:babel-core/register --require ./test/setup.js",
现在，每次运行npm test，setup.js 就会包含在测试脚本之中一起执行。
第三个，是测试删除按钮。
describe('DOM Rendering', function () {
it('Click the delete button, the Todo item should be deleted', function () {
const app = TestUtils.renderIntoDocument(&App/>);
let todoItems = TestUtils.scryRenderedDOMComponentsWithTag(app, 'li');
let todoLength = todoItems.
let deleteButton = todoItems[0].querySelector('button');
TestUtils.Simulate.click(deleteButton);
let todoItemsAfterClick = TestUtils.scryRenderedDOMComponentsWithTag(app, 'li');
expect(todoItemsAfterClick.length).to.equal(todoLength - 1);
上面代码中，第一步是将App渲染成真实的DOM节点，然后使用scryRenderedDOMComponentsWithTag方法找出app里面所有的li元素。然后，取出第一个li元素里面的button元素，使用TestUtils.Simulate.click方法在该元素上模拟用户点击。最后，判断剩下的li元素应该少了一个。
这种测试方法的基本思路，就是找到目标节点，然后触发某种动作。官方测试工具库提供多种方法，帮助用户找到所需的DOM节点。
：找出所有匹配指定className的节点
：与scryRenderedDOMComponentsWithClass用法相同，但只返回一个节点，如有零个或多个匹配的节点就报错
：找出所有匹配指定标签的节点
：与scryRenderedDOMComponentsWithTag用法相同，但只返回一个节点，如有零个或多个匹配的节点就报错
：找出所有符合指定子组件的节点
：与scryRenderedComponentsWithType用法相同，但只返回一个节点，如有零个或多个匹配的节点就报错
：遍历当前组件所有的节点，只返回那些符合条件的节点
可以看到，上面这些方法很难拼写，好在还有另一种找到DOM节点的替代方法。
3.3 findDOMNode
如果一个组件已经加载进入DOM，react-dom模块的findDOMNode方法会返回该组件所对应的DOM节点。
我们使用这种方法来写第四个，用户点击Todo项时的行为。
import {findDOMNode} from 'react-dom';
describe('DOM Rendering', function (done) {
it('When click the Todo item，it should become done', function () {
const app = TestUtils.renderIntoDocument(&App/>);
const appDOM = findDOMNode(app);
const todoItem = appDOM.querySelector('li:first-child span');
let isDone = todoItem.classList.contains('todo-done');
TestUtils.Simulate.click(todoItem);
expect(todoItem.classList.contains('todo-done')).to.be.equal(!isDone);
上面代码中，findDOMNode方法返回App所在的DOM节点，然后找出第一个li节点，在它上面模拟用户点击。最后，判断classList属性里面的todo-done，是否出现或消失。
第五个测试用例，是添加新的Todo项。
describe('DOM Rendering', function (done) {
it('Add an new Todo item, when click the new todo button', function () {
const app = TestUtils.renderIntoDocument(&App/>);
const appDOM = findDOMNode(app);
let todoItemsLength = appDOM.querySelectorAll('.todo-text').
let addInput = appDOM.querySelector('input');
addInput.value = 'Todo four';
let addButton = appDOM.querySelector('.add-todo button');
TestUtils.Simulate.click(addButton);
expect(appDOM.querySelectorAll('.todo-text').length).to.be.equal(todoItemsLength + 1);
上面代码中，先找到input输入框，添加一个值。然后，找到Add Todo按钮，在它上面模拟用户点击。最后，判断新的Todo项是否出现在Todo列表之中。
findDOMNode方法的最大优点，就是支持复杂的CSS选择器。这是TestUtils本身不提供的。
四、Enzyme库
是官方测试工具库的封装，它模拟了jQuery的API，非常直观，易于使用和学习。
它提供三种测试方法。
4.1 shallow
方法就是官方的shallow rendering的封装。
下面是第一个，测试App的标题。
import {shallow} from 'enzyme';
describe('Enzyme Shallow', function () {
it('App\'s title should be Todos', function () {
let app = shallow(&App/>);
expect(app.find('h1').text()).to.equal('Todos');
上面代码中，shallow方法返回App的浅渲染，然后app.find方法找出h1元素，text方法取出该元素的文本。
关于find方法，有一个注意点，就是它只支持简单选择器，稍微复杂的一点的CSS选择器都不支持。
component.find('.my-class'); // by class name
component.find('#my-id'); // by id
component.find('td'); // by tag
component.find('div.custom-class'); // by compound selector
component.find(TableRow); // by constructor
component.find('TableRow'); // by display name
4.2 render
方法将React组件渲染成静态的HTML字符串，然后分析这段HTML代码的结构，返回一个对象。它跟shallow方法非常像，主要的不同是采用了第三方HTML解析库Cheerio，它返回的是一个Cheerio实例对象。
下面是第二个，测试所有Todo项的初始状态。
import {render} from 'enzyme';
describe('Enzyme Render', function () {
it('Todo item should not have todo-done class', function () {
let app = render(&App/>);
expect(app.find('.todo-done').length).to.equal(0);
在上面代码中，你可以看到，render方法与shallow方法的API基本是一致的。 Enzyme的设计就是，让不同的底层处理引擎，都具有同样的API（比如find方法）。
方法用于将React组件加载为真实DOM节点。
下面是第三个，测试删除按钮。
import {mount} from 'enzyme';
describe('Enzyme Mount', function () {
it('Delete Todo', function () {
let app = mount(&App/>);
let todoLength = app.find('li').
app.find('button.delete').at(0).simulate('click');
expect(app.find('li').length).to.equal(todoLength - 1);
上面代码中，find方法返回一个对象，包含了所有符合条件的子组件。在它的基础上，at方法返回指定位置的子组件，simulate方法就在这个组件上触发某种行为。
下面是第四个，测试Todo项的点击行为。
import {mount} from 'enzyme';
describe('Enzyme Mount', function () {
it('Turning a Todo item into Done', function () {
let app = mount(&App/>);
let todoItem = app.find('.todo-text').at(0);
todoItem.simulate('click');
expect(todoItem.hasClass('todo-done')).to.equal(true);
下面是第五个，测试添加新的Todo项。
import {mount} from 'enzyme';
describe('Enzyme Mount', function () {
it('Add a new Todo', function () {
let app = mount(&App/>);
let todoLength = app.find('li').
let addInput = app.find('input').get(0);
addInput.value = 'Todo Four';
app.find('.add-button').simulate('click');
expect(app.find('li').length).to.equal(todoLength + 1);
下面是Enzyme的一部分API，你可以从中了解它的大概用法。
.get(index)：返回指定位置的子组件的DOM节点
.at(index)：返回指定位置的子组件
.first()：返回第一个子组件
.last()：返回最后一个子组件
.type()：返回当前组件的类型
.text()：返回当前组件的文本内容
.html()：返回当前组件的HTML代码形式
.props()：返回根组件的所有属性
.prop(key)：返回根组件的指定属性
.state([key])：返回根组件的状态
.setState(nextState)：设置根组件的状态
.setProps(nextProps)：设置根组件的属性
2017年6月，TC39 委员会正式发布了《ES2017 标准》。
Web 技术突飞猛进，但是有一个领域一直无法突破 ---- 游戏。
Node 主要用在开发 Web 应用。这决定了使用 Node，往往离不开 Web 应用框架。
一、什么是内存泄漏？
程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。初识react native 练习记录 - wuqilianga的博客 - CSDN博客
初识react native 练习记录
react-native
慢慢找一下网上的学习资料，慢慢学习适应react-native 开发进程，希望每天都有进步，越来越有知识
代码例子：
* Sample React Native App
* /facebook/react-native
import React, { Component } from 'react';
AppRegistry,
StyleSheet,
ScrollView,
TextInput,
TouchableNativeFeedback
} from 'react-native';
class ss extends Component {
render() {
var Dimensions = require('Dimensions');
var ScreenWidth = Dimensions.get('window').
var ScreenHeight = Dimensions.get('window').
var ScreenScale = Dimensions.get('window').
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
let picQQ = {
uri: '/n6/jfs/t318/7d5a8eae/dd5d4a.jpg'
let picMeinv = {
uri: '/n2/s100x100_jfs/t886/14ccb604/N.jpg'
&ScrollView style={styles.mainStyle}&
&View style={[styles.flex, styles.topStaus]}&
&Search /&
&View style={styles.container}&
&View style={styles.container}&
&Text style={styles.welcome}&
React Native 深海遨游!
&Text style={styles.welcome}&
屏幕宽高比：{Math.floor(ScreenWidth)} ： {Math.floor(ScreenHeight)} {'\n'}
缩放比：{ScreenScale} {/* 别忘记加 */}
&Text style={styles.welcome}& 广州市驴车信息科技有限公司 :{'\n'} &/Text&
&Text style={styles.instructions}&
To get started, edit index.android.js
&Text style={styles.instructions}&
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
&View style={{ width: 70 }}&
&Image source={require('./img/ddd.jpg')} style={{ flex: 1, alignSelf: 'center', width: 400 }} /&
&Text style={{ marginTop: 5, alignSelf: 'center', fontSize: 11, color: '#555555', textAlign: 'center' }}&丽人&/Text&
&Image source={picQQ} style={{ flex: 1, width: 240, height: 240, paddingLeft: 10, paddingRight: 10, margin: 10 }} /&
&Image source={pic} style={{ flex: 1, width: 400, height: 110, paddingLeft: 10, paddingRight: 10, margin: 10 }} /&
&Image source={picMeinv} style={{ flex: 1, width: 400, height: 110, paddingLeft: 10, paddingRight: 10, margin: 10 }} /&
&/ScrollView&
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'blue',
fontWeight: '900',
borderColor: 'green',
borderWidth: 2,
borderRadius: 5,
padding: 10
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
/* 输入框开始 */
backgroundColor: '#cd2d1c'
flexDirection: {
flexDirection: 'row',
topStaus: {
margin: 10,
inputHeight: {
height: 45,
height: 45,
borderWidth: 1,
marginLeft: 5,
paddingLeft: 5,
borderColor: '#CCC',
borderRadius: 4,
width: 55,
marginLeft: -5,
marginRight: 5,
backgroundColor: '#23bfff',
height: 45,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
color: '#fff',
fontSize: 15,
fontWeight: 'bold',
marginTop: 1,
marginRight: 5,
marginLeft: 5,
height: 200,
borderColor: '#ccc',
borderTopWidth: 1,
fontSize: 16,
padding: 5,
paddingTop: 10,
paddingBottom: 10,
borderWidth: 1,
borderColor: '#ddd',
borderTopWidth: 0,
/* 输入框结束 */
/* 输入框js业务处理开始 */
var Search = React.createClass({
//初始化方法
getInitialState: function () {
show: false
//获取value值调用的方法
getValue: function (text) {
var value =
this.setState({
show: true,
value: value
hide: function (val) {
this.setState({
show: false,
value: val
render: function () {
&View style={[styles.flex]}&
&View style={[styles.flexDirection, styles.inputHeight]}&
&View style={styles.flex}&
&TextInput style={styles.inputs}
returnKeyType=&search&
placeholder=&请输入搜索关键字&
onEndEditing={this.hide.bind(this, this.state.value)}
value={this.state.value}
onChangeText={this.getValue} /&
&View style={styles.btn}&
&Text style={styles.search} onPress={this.hide.bind(this, this.state.value)}&搜索&/Text&
{/* //结果列表 */}
{this.state.show ?
&View style={[styles.result]}&
&Text onPress={this.hide.bind(this, this.state.value + '街')}
style={styles.item}
numberOfLines={1}&{this.state.value}街&/Text&
&Text onPress={this.hide.bind(this, this.state.value + '商厦')}
style={styles.item}
numberOfLines={1}&{this.state.value}商厦&/Text&
&Text onPress={this.hide.bind(this, 111 + this.state.value + '超市')}
style={styles.item}
numberOfLines={1}&111{this.state.value}超市&/Text&
&Text onPress={this.hide.bind(this, this.state.value + '车站')}
style={styles.item}
numberOfLines={1}&{this.state.value}车站&/Text&
&Text onPress={this.hide.bind(this, '办公' + this.state.value + '大厦')}
style={styles.item}
numberOfLines={1}&办公{this.state.value}大厦&/Text&
/* 输入框js业务处理结束*/
AppRegistry.registerComponent('ss', () =& ss);
关于alert和androidToast使用
* Sample React Native App
* /facebook/react-native
'use strict';
import React, { Component } from 'react';
AppRegistry,
StyleSheet,
ScrollView,
TextInput,
ToastAndroid,
TouchableHighlight,
TouchableNativeFeedback
} from 'react-native';
class CustomButton ponent {
render() {
&TouchableHighlight
style={styles.button}
underlayColor=&#a5a5a5&
onPress={this.props.onPress}&
&Text style={styles.buttonText}&{this.props.text}&/Text&
&/TouchableHighlight&
class ss extends Component {
render() {
var Dimensions = require('Dimensions');
var ScreenWidth = Dimensions.get('window').
var ScreenHeight = Dimensions.get('window').
var ScreenScale = Dimensions.get('window').
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
let picQQ = {
uri: '/n6/jfs/t318/7d5a8eae/dd5d4a.jpg'
let picMeinv = {
uri: '/n2/s100x100_jfs/t886/14ccb604/N.jpg'
&ScrollView style={styles.mainStyle}&
&View style={[styles.flex, styles.topStaus]}&
&Search /&
&View style={styles.container}&
&View style={styles.container}&
&Text style={styles.welcome}&
React Native 深海遨游!
&Text style={styles.welcome}&
屏幕宽高比：{Math.floor(ScreenWidth)} ： {Math.floor(ScreenHeight)} {'\n'}
缩放比：{ScreenScale} {/* 别忘记加 */}
&Text style={styles.welcome}& 广州市驴车信息科技有限公司 :{'\n'} &/Text&
&Text style={styles.instructions}&
To get started, edit index.android.js
&Text style={styles.instructions}&
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
&View style={{ width: 70 }}&
&Image source={require('./img/ddd.jpg')} style={{ flex: 1, alignSelf: 'center', width: 400 }} /&
&Text style={{ marginTop: 5, alignSelf: 'center', fontSize: 11, color: '#555555', textAlign: 'center' }}&丽人&/Text&
&Image source={picQQ} style={{ flex: 1, width: 240, height: 240, paddingLeft: 10, paddingRight: 10, margin: 10 }} /&
&Image source={pic} style={{ flex: 1, width: 400, height: 110, paddingLeft: 10, paddingRight: 10, margin: 10 }} /&
&Image source={picMeinv} style={{ flex: 1, width: 400, height: 110, paddingLeft: 10, paddingRight: 10, margin: 10 }} /&
&Text style={{ height: 30, color: 'black', margin: 8 }}&
弹出框实例
&CustomButton text='点击弹出默认Alert'
onPress={() =& Alert.alert('温馨提醒', '确定退出吗?')}
&CustomButton text='点击弹出两个按钮的Alert'
onPress={() =& Alert.alert('温馨提醒', '确定退出吗?', [
{ text: '取消', onPress: () =& ToastAndroid.show('你点击了取消~', ToastAndroid.SHORT) },
{ text: '确定', onPress: () =& ToastAndroid.show('你点击了确定~', ToastAndroid.SHORT) }
&CustomButton text='点击弹出三个按钮的Alert'
onPress={() =& Alert.alert('温馨提醒', '确定退出吗?', [
{ text: 'One', onPress: () =& ToastAndroid.show('你点击了One~', ToastAndroid.SHORT) },
{ text: 'Two', onPress: () =& ToastAndroid.show('你点击了Two~', ToastAndroid.SHORT) },
{ text: 'Three', onPress: () =& ToastAndroid.show('你点击了Three~', ToastAndroid.SHORT) }
&/ScrollView&
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'blue',
fontWeight: '900',
borderColor: 'green',
borderWidth: 2,
borderRadius: 5,
padding: 10
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
/* 输入框开始 */
backgroundColor: '#cd2d1c'
flexDirection: {
flexDirection: 'row',
topStaus: {
margin: 10,
width: 400
inputHeight: {
height: 45,
height: 45,
borderWidth: 1,
marginLeft: 5,
paddingLeft: 5,
borderColor: '#CCC',
borderRadius: 4,
width: 55,
marginLeft: -5,
marginRight: 5,
backgroundColor: '#23bfff',
height: 45,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
color: '#fff',
fontSize: 15,
fontWeight: 'bold',
marginTop: 1,
marginRight: 5,
marginLeft: 5,
height: 200,
borderColor: '#ccc',
borderTopWidth: 1,
fontSize: 16,
padding: 5,
paddingTop: 10,
paddingBottom: 10,
borderWidth: 1,
borderColor: '#ddd',
borderTopWidth: 0,
/* 输入框结束 */
/* alert */
margin: 5,
backgroundColor: 'white',
padding: 15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#cdcdcd',
/* alert -end */
/* 输入框js业务处理开始 */
var Search = React.createClass({
//初始化方法
getInitialState: function () {
show: false
//获取value值调用的方法
getValue: function (text) {
var value =
this.setState({
show: true,
value: value
hide: function (val) {
this.setState({
show: false,
value: val
render: function () {
&View style={[styles.flex]}&
&View style={[styles.flexDirection, styles.inputHeight]}&
&View style={styles.flex}&
&TextInput style={styles.inputs}
returnKeyType=&search&
placeholder=&请输入搜索关键字&
onEndEditing={this.hide.bind(this, this.state.value)}
value={this.state.value}
onChangeText={this.getValue} /&
&View style={styles.btn}&
&Text style={styles.search} onPress={this.hide.bind(this, this.state.value)}&搜索&/Text&
{/* //结果列表 */}
{this.state.show ?
&View style={[styles.result]}&
&Text onPress={this.hide.bind(this, this.state.value + '街')}
style={styles.item}
numberOfLines={1}&{this.state.value}街&/Text&
&Text onPress={this.hide.bind(this, this.state.value + '商厦')}
style={styles.item}
numberOfLines={1}&{this.state.value}商厦&/Text&
&Text onPress={this.hide.bind(this, 111 + this.state.value + '超市')}
style={styles.item}
numberOfLines={1}&111{this.state.value}超市&/Text&
&Text onPress={this.hide.bind(this, this.state.value + '车站')}
style={styles.item}
numberOfLines={1}&{this.state.value}车站&/Text&
&Text onPress={this.hide.bind(this, '办公' + this.state.value + '大厦')}
style={styles.item}
numberOfLines={1}&办公{this.state.value}大厦&/Text&
/* 输入框js业务处理结束*/
/* alert使用 */
/* alert使用-end */
AppRegistry.registerComponent('ss', () =& ss);
我的热门文章}