360SDN.COM

React Native编写Hello World

来源:  2017-06-17 20:56:17    评论:0点击:

来源:http://reactnative.cn/docs/0.31/props.html
React Native看起来很像React,只不过其基础组件是原生组件而非web组件。要理解React Native应用的基本结构,首先需要了解一些基本的React的概念,比如JSX语法、组件、state状态以及props属性。如果你已经了解了React,那么还需要掌握一些React Native特有的知识,比如原生组件的使用。这篇教程可以供任何基础的读者学习,不管你是否有React方面的经验。

让我们开始吧!

Hello World

根据历史悠久的“传统”,我们也来写一个“Hello World”:

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!Text>
    );
  }
}

// 注意,这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

你可以新建一个项目,然后用上面的代码覆盖你的index.ios.js或是index.android.js 文件,然后运行看看。

那这段代码是什么意思呢?

初看这段代码,可能觉得并不像JavaScript——没错,这是“未来”的JavaScript.

首先你需要了解ES2015 (也叫作ES6)——这是一套对JavaScript的语法改进的官方标准。但是这套标准目前还没有在所有的浏览器上完整实现,所以目前而言web开发中还很少使用。React Native内置了对ES2015标准的支持,你可以放心使用而无需担心兼容性问题。上面的示例代码中的importfromclassextends、以及() =>箭头函数等新语法都是ES2015中的特性。如果你不熟悉ES2015的话,可以看看阮一峰老师的书,还有论坛的这篇总结

示例中的这一行Hello world!恐怕很多人看起来也觉得陌生。这叫做JSX——是一种在JavaScript中嵌入XML结构的语法。很多传统的应用框架会设计自有的模板语法,让你在结构标记中嵌入代码。React反其道而行之,设计的JSX语法却是让你在代码中嵌入结构标记。初看起来,这种写法很像web上的HTML,只不过使用的并不是web上常见的标签如

或是等,这里我们使用的是React Native的组件。上面的示例代码中,使用的是内置的组件,它专门用来显示文本。

 

组件与AppRegistry

上面的代码定义了一个名为HelloWorldApp的新的组件(Component),并且使用了名为AppRegistry的内置模块进行了“注册”操作。你在编写React Native应用时,肯定会写出很多新的组件。而一个App的最终界面,其实也就是各式各样的组件的组合。组件本身结构可以非常简单——唯一必须的就是在render方法中返回一些用于渲染结构的JSX语句。

AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。你无需在此深究,因为一般在整个应用里AppRegistry.registerComponent这个方法只会调用一次。上面的代码里已经包含了具体的用法,你只需整个复制到index.ios.js或是index.android.js文件中即可运行。

这个示例弱爆了!

……是的。如果想做些更有意思的东西,请接着学习Props属性。或者可以看看一个稍微复杂些的“电影列表”例子


React Native Props(属性)


大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。

以常见的基础组件Image为例,在创建一个图片时,可以传入一个名为source的prop来指定要显示的图片的地址,以及使用名为style的prop来控制其尺寸。

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}} />
    );
  }
}

AppRegistry.registerComponent('Bananas', () => Bananas);

译注:在iOS上使用http链接的图片地址可能不会显示,参见这篇说明修改

请注意{pic}外围有一层括号,我们需要用括号来把pic这个变量嵌入到JSX语句中。括号的意思是括号内部为一个js变量或表达式,需要执行后取值。因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。

自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props,然后按需处理即可。下面是一个例子:

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      View>
    );
  }
}

AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

我们在Greeting组件中将name作为一个属性来定制,这样可以复用这一组件来制作各种不同的“问候语”。上面的例子把Greeting组件写在JSX语句中,用法和内置组件并无二致——这正是React体系的魅力所在——如果你想搭建一套自己的基础UI框架,那就放手做吧!

上面的例子出现了一样新的名为View的组件。View 常用作其他组件的容器,来帮助控制布局和样式。

仅仅使用props和基础的TextImage以及View组件,你就已经足以编写各式各样的UI组件了。要学习如何动态修改你的界面,那就需要进一步学习State(状态)的概念

 

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权