ReactNative学习笔记2

原文地址1,
原文地址2,本文为原文不完全翻译

Hello World

所有的程序皆由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>
    );
  }
}

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

Paste_Image.png

你可以将上面的代码复制黏贴到你项目中的index.ios.js 或者 index.android.js 文件中运行一下看看效果.

这是怎么一回事?

可以看到上面的代码和JavaScript很相似,这是未来移动端的一大趋势吧(原文大意,我表示观望).
首先,ES2015(也就是ES6)作为JavaScript的一大标准尚未被所有的浏览器接受,这也是ES6还没有应用到web开发的原因,不过ReactNative是支持ES6的,所以不需要担心适配问题.import, from, class, extends, 以及 () =>都是ES6的特点,如果对其不熟悉的话可以看看这里,能帮助你大致了解ES6标准.(PS:网页端的RN代码编写器)

属性

大部分的组件(Component)都可以对其进行自定义属性的,看看下面的例子:

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);

关注这一行<Image source={pic} style={{width: 193, height: 110}}/>,这是一个Image组件,可以通过自定义它的source属性来达到更改显示的图片地址的作用,另外可以看到{pic}这种写法,这是JSX的语法,在JSX里面,可以将任何的JavaScript的表达式写进大括号{}里面

另外你自己创建的component也是可以使用属性props的,并且使用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);

Paste_Image.png

看到我们给Greeting组件定义了一个属性name,然后在LotsOfGreetings中对其进行了三次的复用,每一次都对name进行一次赋值就可以实现了上图效果.