文档章节

React Native Tutorial摘要(一)

遥借东风
 遥借东风
发布于 2016/07/20 20:55
字数 764
阅读 14
收藏 0

###安装 在Mac上用homebrew安装非常简单:

brew install node
brew install watchman
npm install -g react-native-cli

当然前提也需要安装好Xcode和Android SDK及虚拟机。

然后就可以玩了,初始化一个project

react-native init AwesomeProject

这个时间稍微有点长,完成后可启动

cd AwesomeProject
react-native run-ios

官方向导
当然在按照官方向导时,安装Android Studio后,记得要使用SDK Manager和AVD Manager安装目标版本的SDK和模拟器。

###简单的用例 语法使用ES6标准,另外需要了解些React基本概念,如JSX、Component、state和props。

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

将上面代码贴入index.ios.js,然后在已经跑起来的模拟器中cmd+R就可以即时加载。

** 上面类似于在JS中写html的形式,在这里叫JSX。** ** 上面看起来像html的Text,它其实是一个Component。**

  • 要使用Component,需要先import。
  • AppRegistry只是为了告诉React Native谁是Root Component。

####Props

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

以像html的attribute的形式注入组件中。

在我看来,它是抽出一些特性出来支持定制,让Component可以容易复用。 如:

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

####state state也是Component内部带有一种模型,与props不同,它的目的是为了支持值变化。

  • 在构造器中初始化它,然后当想change的时候调用setState重新设置。
  • 真实场景可能是,当一条请求返回数据回调时,或者用户输入数据时等。
  • 官方有提到Redux,推荐使用Redux——一个state容器,去控制data flow。那样不会用太多机会直接调用setStats方法。
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

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

State works the same way as it does in React, so for more details on handling state, you can look at the React.Component API.

####Style React组件中可以使用类CSS一样去控制样式,可以将background-color这样的使用backgroundColor去对照使用。 Style是一个命名为style的props,所有的Core component都支持它。

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

class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

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

**style可以接受数组,如_[styles.bigblue, styles.red]_。相同的样式,后面的将覆盖前面的。 **StyleSheet.create中,每一个对象如一个class。

© 著作权归作者所有

共有 人打赏支持
遥借东风
粉丝 1
博文 32
码字总数 22706
作品 0
武汉
高级程序员
React Native Tutorial摘要(二)

组件的宽和高 基本跟CSS一样使用,但要注意是放在style中的对象中,即{{}}。~~~import React, { Component } from 'react';import { AppRegistry, View } from 'react-native'; class Fixed...

遥借东风
2016/07/23
10
0
React Native 相关资源汇总

原文地址:https://github.com/jondot/awesome-react-native 文章 React Native: Bringing modern web techniques to mobile First impressions using React Native React Packager README.......

OSC编辑部
2015/07/21
1K
1
整理了一份React-Native学习指南

自己在学习React-Native过程中整理的一份学习指南,包含 教程、开源app和资源网站等,还在不断更新中。欢迎pull requests! React-Native学习指南 本指南汇集React-Native各类学习资源,给大...

太阳黑子
2016/11/03
34
0
ECharts/echarts

ECharts ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial p......

ECharts
2017/04/24
0
0
React Native 学习指南

本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源欢迎Pull Requests! 原文地址:https://github.com/ele828/react-native-guide 同时还有Awesome...

OSC编辑部
2015/07/09
4.8K
9

没有更多内容

加载失败,请刷新页面

加载更多

TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
20分钟前
0
0
AVA中CAS-ABA的问题解决方案AtomicStampedReference

了解CAS(Compare-And-Swap) CAS即对比交换,它在保证数据原子性的前提下尽可能的减少了锁的使用,很多编程语言或者系统实现上都大量的使用了CAS。 JAVA中CAS的实现 JAVA中的cas主要使用的是...

码代码的小司机
22分钟前
0
0
Android JNI开发系列(十三) JNI异常处理

JNI 异常处理 JNI异常与JAVA处理异常的区别 JAVA 有异常处理机制,而JNI没有 如果JAVA中异常没有捕获,后面的代码不会执行,JNI会执行 JAVA编译时的异常,是在方法显示的声明了某一个异常,编...

蔡小鹏
35分钟前
2
0
简单介绍Java 的JAR包、EAR包、WAR包区别

WAR包 WAR(Web Archive file)网络应用程序文件,是与平台无关的文件格式,它允许将许多文件组合成一个压缩文件。War专用于Web方面。大部分的JAVA WEB工程,都是打成WAR包进行发布的。 War是...

Linux就该这么学
今天
1
0
Qt那些事0.0.7

在帮助文档(Overview - QML and C++ Integration)中随缘遇到一张图,是关于C++对象与QML整合介绍的,值得标记下来,虽然大部分功能也有所涉猎,但是还是留个记号,万一哪天我失忆了还想写Q...

Ev4n
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部