React Native官方入门教程

最新推荐文章于 2023-05-09 21:06:51 发布
最新推荐文章于 2023-05-09 21:06:51 发布
阅读量8.3k 收藏 16
点赞数 1
分类专栏： android javascript 文章标签： react-nati

官方教程主要是一步一步的介绍如何用ListView来显示一条Json数据。

模拟数据

在编写关于获取远程数据的代码之前，先让我们用一些模拟数据，以便上手React Native。在Facebook（公司），我们的做法是一般在JS文件的顶部声明常量，下面接着就是一些import。当然你可以在index.ios.js或index..android.js（这里考虑android）的任意位置增加下面的常量：

var MOCKED_MOVIES_DATA = [ {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}}, ];

渲染一个movie

我们现在为这个movie渲染title,year和thumbnail。由于thumbnail在React Native中是一个Image组件，因此增加Image到下面React imports列表。

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

接着修改render方法来渲染我们上面提到的（模拟）数据。

render() {
    var movie = MOCKED_MOVIES_DATA[0];
    return (
      <View style={styles.container}>
        <Text>{movie.title}</Text>
        <Text>{movie.year}</Text>
        <Image source={{uri: movie.posters.thumbnail}} />
      </View>
    );
  }

手机上打开开发者菜单Reload JS后你应该可以看到“2015”和下面的“Title”。注意，Image没有被渲染上。这是因为我们没有为其制定宽和高。这需要通过styles来实现。让我们清除不在使用的styles再修改styles。

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
});

同时，我们需要将style应用到Image组件上。

    <Image
       source={{uri: movie.posters.thumbnail}}
       style={styles.thumbnail}
    />

重新Reload JS，我们会看到下面的效果：
这里写图片描述

增加一些样式

上面渲染了我们的数据，现在让我们使他看起来更好，我打算在图片的右边放一些文字，让title变大并且居中。
这里写图片描述
我们需要增加一个容器以便我们在水平方向上布局我们的组件。

 return (
        <View style={styles.container}>
          <Image
            source={{uri: movie.posters.thumbnail}}
            style={styles.thumbnail}
          />
          <View style={styles.rightContainer}>
            <Text style={styles.title}>{movie.title}</Text>
            <Text style={styles.year}>{movie.year}</Text>
          </View>
        </View>
      );

没有太多的改变，我们增加了一个容器包含所有的Text并把这些Text移动Image的下面（因为他们是在Image的右边显示）。然后我们看看style做的修改：

container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

我们使用FlexBox（弹性盒模型）来布局-关于FlexBox去this great guide了解更多。
在上面的代码片段中，我们增加了flexDirection:’row’,这使得容器里的子view在水平方向上布局而不是在垂直方向上。
现在在Js style object中增加另一个style：

rightContainer: {
    flex: 1,
  },

这意味着rightContainer占据父容器中Image以外的剩余的空间，如果你感觉效果不明显，可以给rightContainer增加一个backgroundColor并移除flex:1。你将会看到容器尺寸变成了能容纳子view的最小尺寸。
简单的文字样式：

title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: 'center',
  },
  year: {
    textAlign: 'center',
  },

重新Reload JS,你将看到新的视图
这里写图片描述

取得真正的数据

从Rotten Tomatoes’s API是取得数据是真正的开始学习React Native，因此我们在这块尽情畅游。
在JS文件顶部增加下面的常量，在请求数据的时候需要使用。

/**
 * For quota reasons we replaced the Rotten Tomatoes' API with a sample data of
 * their very own API that lives in React Native's Github repo.
 */
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

为我们的应用增加一些初始的状态，我们可以判断this.state.movies == null ，根据movies是否为null来决定movies data是否已经加载完成。当请求响应回来时，使用this.setState(movies:moviesData)来设置数据。在React类里render方法上增加这些代码：

constructor(props) {
    super(props);
    this.state = {
      movies: null,
    };
  }

我们要在组件加载完成后发送一个请求。componentDimMount是React components方法，React仅仅在组件加载完成后调用一次该方法。

componentDidMount() { this.fetchData(); }

现在再增加fetchData方法。这个方法用于获取数据。你需要做的只是在解析了协议之后调用this.setState({movies:data})，因为React工作的方式是：setState方法会触发render方法重新渲染，这时render方法里this.setstate.movies将不再是null。注意，我们在方法链最好调用了done()方法，一般总是需要调用done()方，否则任何抛出的异常你将都看不到。

fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          movies: responseData.movies,
        });
      })
      .done();
  }

现在修改render()方法，如果没有movies data就渲染loading view否则渲染第一个movies(获取到的json数据包含多个movies)。

render() {
    if (!this.state.movies) {
      return this.renderLoadingView();
    }

    var movie = this.state.movies[0];
    return this.renderMovie(movie);
  }

  renderLoadingView() {
    return (
      <View style={styles.container}>
        <Text>
          Loading movies...
        </Text>
      </View>
    );
  }

  renderMovie(movie) {
    return (
      <View style={styles.container}>
        <Image
          source={{uri: movie.posters.thumbnail}}
          style={styles.thumbnail}
        />
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{movie.title}</Text>
          <Text style={styles.year}>{movie.year}</Text>
        </View>
      </View>
    );
  }

重新reload JS,你将看到“Loading movies…”直到响应返回，才会渲染从Rotten Tomatoes取得的第一条movie。
这里写图片描述

ListView

现在修改应用程序，我们使用ListView组件来渲染所有的数据，而不仅仅显示出第一条movie。
为什么使用ListView更好，而不是仅仅渲染所有这些数据或者使用ScrollView？尽管React是快速的，但是渲染一个可能无限的元素列表是慢的。使用ListView渲染views,你仅仅展现一整个屏幕的元素，但是屏幕以外（看不到的）的views会从native view的层次结构上删除。
首先：添加ListView到import中。

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

接着修改render方法，一旦获取数据就使用ListView渲染所有movie,而不是仅仅一条movie。

render() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderMovie}
        style={styles.listView}
      />
    );
  }

dataSource是一个接口，ListView用以决定哪一行在更新过程中改变过。
注意我们使用this.state的dataSource。接下来增加一个空的dataSource到constructor里面。现在我们正在给dataSource里的数据排序，我们不应该再使用this.state.movies已避免数据排序两次。我们使用boolean类型的属性（this.state.loaded）来判断数据是否加载完成。

constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  }

修改fetchData方法，相应地更新state值。

fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
          loaded: true,
        });
      })
      .done();
  }

最后我们为ListView增加样式。

listView: {
    paddingTop: 20,
    backgroundColor: '#F5FCFF',
  },

最终的效果：
这里写图片描述
最终的代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

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

var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

class AwesomeProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
          loaded: true,
        });
      })
      .done();
  }

  render() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderMovie}
        style={styles.listView}
      />
    );
  }

  renderLoadingView() {
    return (
      <View style={styles.container}>
        <Text>
          Loading movies...
        </Text>
      </View>
    );
  }

  renderMovie(movie) {
    return (
      <View style={styles.container}>
        <Image
          source={{uri: movie.posters.thumbnail}}
          style={styles.thumbnail}
        />
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{movie.title}</Text>
          <Text style={styles.year}>{movie.year}</Text>
        </View>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  rightContainer: {
    flex: 1,
  },
  title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: 'center',
  },
  year: {
    textAlign: 'center',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
  listView: {
    paddingTop: 20,
    backgroundColor: '#F5FCFF',
  },
});

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

本文译自：https://facebook.github.io/react-native/docs/tutorial.html#content
react native是react的衍生平，学习react之前有必要了解一下react的知识，推荐链接：http://www.ruanyifeng.com/blog/2015/03/react.html。
ReactNative 通信机制，推荐链接：http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=663&utm_source=tuicool&utm_medium=referral
关于ECMAScript6，推荐链接：http://www.infoq.com/cn/minibooks/ES6-in-Depth

zxc123e
关注
专栏目录
React Native入门——布局实践：开发京东客户端首页（二）TabBar的构建
可爱的程序猿
01-21 1万+
本文主要对京东客户端TabBar的样式进行了分析，并对React Native中tabnavigator控件进行了说明，并一步一步讲将TabBar的构建步骤呈现出来，让我们一起来开发自己的TabBar！
React Native基础视频教程
12-11
01.JavaScript基础 02.ECMAScript 新功能 03.React 基础 04.React 路由 05React Native基础知识 06.React Native进阶 07.R React Native高级 08ECMAScript 2105(es6) 09React Native视频教程-项目实战
React Native之React速学教程(上)
fengyuzhengfan的专栏
08-11 7619
React Native之React速学教程(上)本文出自《React Native学习笔记》系列文章。React Native是基于React的，在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document，但篇幅比较多，学起来比较枯燥。
React Native入门教程
最新发布
m0_75198698的博客
05-09 1228
在上述示例中，我们通过使用`import`语句导入了React和React Native的核心模块，同时定义了一个名为`App`的React组件。在组件的`render`方法中，我们返回了一个由`View`和`Text`组件组成的UI界面。打开您的文本编辑器，找到`MyApp`目录中的`App.js`文件，该文件是React Native应用程序的入口文件。React Native提供了一些内置的布局组件，例如`FlexBox`、`Grid`、`List`等，您可以通过这些组件。
React Native第一个Demo（1）
空杯子
06-03 5165
在Demo主要是展示一个电影信息和在ListView展示25个电影信息。1、初始化一个项目并运行打开终端，输入：react-native init DemoProject输入后初始化一个项目返回信息如下： 有时候Installing react-native package from npm… 这一步会很慢，耐心等待，没问题的。init DemoProject This will walk yo
ReactNative教程 — Hello React Native
踩姑凉的小蘑菇
10-31 2346
ReactNative教程 — Hello React Native
react-native-elements-app：用于React Native Elements的演示应用程序（带有React Native Web）
02-05
React Native Elements应用 | 这是用构建的的演示应用程序。 在此应用中，您将找到有关如何使用各种RNE组件以及生产就绪屏幕的示例。 该应用程序还可以使用在web平台上运行。 您可以在签出。 如果您希望构建一个...
react native 零基础从入门到实战
06-19
就一套的rn教学，一开始教一些控件的内容，后面会配套项目进行开发
ReactNative从入门到原理
02-25
ReactNative是最近非常火的一个话题，介绍如何利用ReactNative进行开发的文章和书籍多如牛毛，但面向入门水平并介绍它工作原理的文章却寥寥无几。本文分为两个部分：上半部分用通俗的语言解释了相关的名词，重点介绍...
react native
qqyouhappy的博客
08-01 208
http://reactnative.cn/docs/0.20/getting-started.html
React Native视频教程
11-27
很经典的React Native视频教程，可迅速让您上手干活，拿下高薪工作不是梦
react native入门
weixin_45720111的博客
04-10 321
文章目录前言一、react native是什么？二、目录介绍三、使用Android Studio跑起来建议 前言 上个月公司为了上报率，要求使用新技术，在许多从未只是听过，没用过的技术里，果断选择了react native,坑还是很多的，但是现在项目还是开发的差不多了，所以在这个星期六，写一篇react native的踩坑日记，也方便自己日后巩固 一、react native是什么？ 在这里先留下文档，有兴趣的可以看一看文档，更专业react-native中文网 至于为什么让一个从未接触过react的小
React Native 入门
CJQ316210的专栏
03-16 452
学习地址：https://reactnative.cn/docs/0.51/getting-started.html#content经历：我在react-native init rn-test后，将local.properties放入android目录，其内容是我的sdk目录如下，之后我便运行了android，其中android手机是真机，并且开了usb调试，运行命令：react-native r...
ReactNative 入门
tumi
08-24 1945
1.开发环境和本地调试上的差别，RN开发环境比较麻烦，最好对原生开发工具（Android Studio / XCode）有一些基本的了解，遇到问题谷歌和百度官网和社区都能解决。4.本地存储和全局对象的差别，RN中通过官方提供asyc-storeage或者社区的第三方包实现，且无window对象，需要全局对象可以自行实现全局单例即可。3.样式编写上的差别，无className, 只支持内联样式，通过RN提供的style.create创建，且样式无继承，一些样式属性上也存在差异。// TODO 未完成待续~
ReactNative入门
SeaState的博客
02-05 2671
简要介绍 什么是 ReactNative？ React Native （以下简称 RN）是 Facebook 研发并开源的应用框架，由 React 和应用平台的原生功能组成。RN 的主要编程语言是 JavaScript（以下简称 JS），所以可以使用后端强⼤的 Web 方式管理，做到既能⾼效开发，又可以实现快速部署和热修复。 RN 的优缺点 优点： 容易上手: RN 入门较轻松，只要有一门面向对象语言的基础，都可以很快上手，而且社区较活跃，很多资料在网上都能查到。 垮平台开发 ：相比原生的ios 和
React Native入门
赈川
11-25 449
文章目录React-Native简介React-Native特性React-Native架构React-Native详细学习 React-Native简介 React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。RN使用Javascript语言，...
React Native 入门基础
殇神马的博客
10-06 629
一、前言 React Native是Facebook推出的使用React和平台原生功能来构建Android和iOS应用的开源移动跨平台框架; -视图（Views）和移动开发 在Android和iOS移动应用中，一个视图是UI的基本组成部分：屏幕上的一个小矩形元素、可用于显示文本、图像、和响应用户输入。某些视图也可以包含其他视图，全部都是视图; -原生组件 在Android开发中是使用Java或者Kotlin来编写视图，在iOS开发中是使用Object-C和Swift来编写视图，在React Native中则
React Native TabBarIOS基础教程：实战示例
在React Native开发中，TabBarIOS是一个内置的组件，它允许开发者创建带有底部导航栏的界面，非常适合构建多页面应用。本文将详细介绍如何在React Native中使用TabBarIOS实现简单的导航功能。 首先，确保在项目中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值