码迷，mamicode.com
首页 > 其他好文 > 详细

React Native入门－实战解析（上）

时间：2016-04-22 19:43:55      阅读：202      评论：0      收藏：0      [点我收藏+]

标签：

来自Leo的原创博客，转载请著名出处

我的stackoverflow
技术分享

概述

随着app端越来越复杂，迭代越来越快，很多app采用原生＋html5的方式来实现，然后不知道什么时候，它就有了个高大上的名字 - hybrid app。类似的框架也很多，比较有名的有

这种app的原理是，用webview来实现类似原生的界面，也就是用h5写的代码是运行在webview里的。优点很明显

  • 动态部署（不需要每次通过应用商店的审核，尤其是iOS，审核有时候真的觉得两颗蛋不够疼的。）
  • 界面灵活（用h5来写的界面要比原生代码灵活的多）
  • 开发迅速（一套代码，iOS，安卓都可以跑；不管是安卓还是iOS，用原生的代码实现类似webview的页面，布局什么的都是很复杂的一件事情）

同样，缺点也很明显

- 性能相对较差（这一点在安卓上尤其明显，安卓的webview性能真的很差，而且安卓机型较多）
- 数据处理能力较差，跑在webview里的程序，而且JavaScript是单线程的，所以很难利用好多核多线程，
- 和硬件组建的交互较差，例如相册，蓝牙，motion等。

React Native

React native是facebook公司推出的一个app开发框架，facebook也有很多其他的框架，在这里都可以找到。

使用纯react native开发的时候，实际的开发语言是JavaScript和框架React。写一套代码，同时运行在多个平台上。

和上文提到的hybrid app最大的区别是

用Reactive Native开发的时候，实际运行的都是原生的代码

目前React Native支持

  • >=Android 4.1
  • >= iOS 7.0

它的优点

  • 可以动态部署,因为是用JS写的，并不需要编译，所以可以在运行期动态的从服务器下载，并且执行。
  • 开发期间，修改界面的时候，只需要Command+R来刷新即可，不需要每次修改都蛋疼的重新编译
  • 支持和原生代码混合编程，所以，对于那些性能要求较高，数据处理复杂的页面，仍然可以用原生的代码来实现。

如果你没有任何的JS和React基础

可以先看看，我之前的这篇JS和React的基础文章

本文最终的效果

本文的目的是实现一个从网络获取数据，加载到ListView，然后点击某一行可以跳转到详情页。
技术分享

React Native环境搭建

由于本文侧重的是如何使用React Native进行开发，所以并不会详细讲解如何安装和搭建环境。可以参考官方文档，搭建很简单

官方文档链接

有几点提一下

  • 最好是Mac电脑，OS X系统，因为iOS运行环境需要OSX
  • iOS目前需要XCode 7 +
  • 安卓需要Android SDK，和模拟器

文档

关于React Native的文档，在这里你都可以找到，这个系列我不会翻译facebook的文档。能阅读英文文档是程序员的一项基本技能，但是我会在使用的时候简单提一下

创建一个工程

打开终端，cd到想要的目录去，然后

react-native init LeoRNWeather

可以看到生成了一个LeoRNWeather的文件夹，这个文件夹的默认的文件如下

android  //安卓的工程        
index.ios.js //iOS的程序入口文件   
node_modules //
index.android.js //安卓的入口文件  
ios         //iOS的工程
package.json //全局的描述信息，本文就使用默认的了

对了我使用的IDE，是Atom
然后，可以手动打开 ios 目录下的XCode 工程，然后点击运行，如果能见到下面截图，代表运行成功
技术分享

入门

记住，React Native没有CSS，所有的实现都是JS的语法。当你打开index.ios.js的时候，大概能发现几个模块

导入的模块，要先导入才能使用

import React, {
    ****
} from ‘react-native‘;

样式布局定义,用JS的语法，由StyleSheet创建，其中样式使用了React的FlexBox，让布局变的十分简单

const styles = StyleSheet.create({
   //*
  welcome: {
    fontSize: 20,
    textAlign: ‘center‘,
    margin: 10,
  },
  //*
});

视图组件，视图继承自Component，可以在文档上找到很多Components

class LeoRNWeather extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

可以看看这一行，可以看到React的视图语法和H5类似，标准的XML格式。

<Text style={styles.welcome}>
      Welcome to React Native!
</Text>

！！！！我们删除这个文件里的全部内容，然后替换成React的风格代码

这时候代码如下

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

var LeoRNWeather = React.createClass({
    render(){
      return (
        <View style= {styles.container}>
          <Text style={styles.blackText}>这是一个标题</Text>
        </View>
      );
    }
});
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: ‘white‘,
    justifyContent: ‘center‘,
  },
  blackText:{
    fontSize:20,
    color:‘rgb(0,0,0)‘,
    backgroundColor:‘rgba(255,255,255,0)‘,
    textAlign:‘center‘,
    marginLeft:10,
  },
});
AppRegistry.registerComponent(‘LeoRNWeather‘, () => LeoRNWeather);

效果

技术分享

添加导航栏

这里提一下，在React Native中，导航栏有两种

  • Navigator，大部分的情况下使用这个，由facebook的react native团队进行开发，一直在维护，同时支持iOS和安卓，由于在导航切换的时候需要进行大量的加载，所以会占用JS线程较多时间。
  • NavigatorIOS，很少使用，由开源社区开发,有很多bug，仅仅支持iOS。但是内部由原生的UINavigationController实现，所以实际运行的时候，和原生的iOS导航一样，有一样的动画

本文使用NavigatorIOS，react native的相关资料还不是很多，一定要会看英文文档，NavigationIOS的文档可以在这里找到

在顶部import引入

  NavigatorIOS,

然后,重写LeoRNWeather,增加导航栏，其中

  • initialRoute 定义最初的页面，类似iOS中的rootViewController,title表示标题，component表示渲染的对象，是Component的子类
var LeoRNWeather = React.createClass({
  render: function() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          title: ‘主页‘,
          component: ListScreen,
        }}
      />
    );
  }
});

创建ListScreen

var ListScreen = React.createClass({
    render(){
      return (
        <View style= {styles.container}>
          <Text style={styles.blackText}>blog.csdn.net/hello_hwc</Text>
        </View>
      );
    }
});

然后， Save,选择模拟器，command+R刷新，可以看到效果(修改了文字)

技术分享

添加背景图

首先，在目录里添加一张图片
技术分享

Tips:当向iOS工程中Images.xcassets添加了图片或者android添加了res/drawable添加图片的时候，需要重新编译

然后，将index.ios.js修改成如下

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  View,
  ListView,
  Text,
  NavigatorIOS,
  Image,
} from ‘react-native‘;
var ListScreen = React.createClass({
    render(){
      return (
        <Image source={require(‘./img/background.png‘)} style={styles.backgroundImg}>
          <Text style={styles.whiteText}>blog.csdn.net/hello_hwc</Text>
        </Image>
      );
    }
});

var LeoRNWeather = React.createClass({
  render: function() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          title: ‘主页‘,
          component: ListScreen,
        }}
      />
    );
  }
});

const styles = StyleSheet.create({
  backgroundImg:{
    flex:1,
    width: null,
    height: null,
    flexDirection: ‘row‘,
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
  },
  whiteText:{
    fontSize:20,
    color:‘rgb(255,255,255)‘,
    backgroundColor:‘rgba(255,255,255,0)‘,
    textAlign:‘left‘,
    marginLeft:10,
  },
  container: {
    flex: 1,
    backgroundColor: ‘white‘,
    justifyContent: ‘center‘,
  },
  blackText:{
    fontSize:20,
    color:‘rgb(0,0,0)‘,
    backgroundColor:‘rgba(255,255,255,0)‘,
    textAlign:‘center‘,
    marginLeft:10,
  },
});

AppRegistry.registerComponent(‘LeoRNWeather‘, () => LeoRNWeather);

效果图
技术分享

Tips
通过设置flex为1来让宽度高度填充100%,通过height，width为null，来让Image填充屏幕
通过设置父视图的alignItems:‘center‘ flexDirection:‘column‘来设置水平居,alignItems:‘center‘ flexDirection:‘row‘来设置垂直居中

关于Flexbox布局，可以参考这片文章，写的非常详细

进行网络请求

React Native网络请求的文档可以在这里找到，在React中，网络请求使用Fetch，
例如，你可以这样去调用一个POST请求

fetch(‘https://mywebsite.com/endpoint/‘, {
  method: ‘POST‘,
  headers: {
    ‘Accept‘: ‘application/json‘,
    ‘Content-Type‘: ‘application/json‘,
  },
  body: JSON.stringify({
    firstParam: ‘yourValue‘,
    secondParam: ‘yourOtherValue‘,
  })
})

由于网络请求是一个异步的请求，所以，它返回的是一个Promise对象，对于这个对象，有两种处理方式

  • 同步处理then和catch
  • 异步处理，async/await

还有一个API是XMLHttpRequest,它是建立在iOS网络请求api之上的，本文不做讨论。

由于本文是这个React Native系列的第一篇，所以处理方式采用同步处理。简单直接。
在类ListScreen中，添加如下两个方法

  //Component挂载完毕后调用
  componentDidMount() {
    this.fetchData();
  },
  fetchData() {
   fetch(REQUEST_URL)
     .then((response) => response.json())
     .then((responseData) => {

     })
     .done();
  },

这里的REQUEST_URL是一个全局变量

var REQUEST_URL = ‘https://raw.githubusercontent.com/LeoMobileDeveloper/React-Native-Files/master/person.json‘;

然后，save,command+R刷新模拟器，会发现Log如下

2016-04-21 13:53:49.563 [info][tid:com.facebook.React.JavaScript] [ { nickname: ‘Leo‘, realname: ‘WenchenHuang‘ },
  { nickname: ‘Jack‘, realname: ‘SomethingElse‘ } ]

为了显示到ListView中，我们要把网络请求来的数据存储下来，为ListScreen添加如下方法

  • 用loaded来判断网络数据是否加载完毕
  • 用users来存储实际的的网络数据，这里因为users是ListView的dataSource,所以用ListView的DataSource来初始化
  //自动调用一次，用来设置this.state的初始状态
  getInitialState: function() {
    return {
      loaded: false,
      users: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
    };
  },

然后修改fetchData方法，在加载完毕后保存数据

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

Tips:this.setState会触发render重新调用，进行重绘

写出一个列表

移动开发中，列表是一个非常常用的控件。（iOS中的Tableview，android中的listview）。

ListView的文档链接

ListView的优点是，当视图离开屏幕的时候，会被复用或者移除，降低内存使用。关于ListVIew，ReactNative团队进行了很多优化，比如event-loop只渲染一个cell，将渲染工作分成很多个小的碎片执行，来防止掉帧。

如何使用ListView
最少需要以下两个

  • dataSource，一个简单数组来描述MVC中的model,类似于iOS中的dataSource
  • renderRow，返回一个视图组建.类似于iOS中的cellForRowAtIndexPath
  • renderSeparator,一般也需要这个方法，来说生成一个分隔线

当然，listView也支持很多，比如像iOS那样的section header,header,footer,以及很多的事件回调，在listView的文档里，你都可以找到。

这时候的ListScreen类如下

var ListScreen = React.createClass({
  getInitialState: function() {
    return {
      loaded: false,
      users: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
    };
  },
  componentDidMount() {
    this.fetchData();
  },
  fetchData() {
   fetch(REQUEST_URL)
     .then((response) => response.json())
     .then((responseData) => {
       this.setState({
         users: this.state.users.cloneWithRows(responseData),
         loaded: true,
       });
     })
     .done();
  },

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

  renderLoadingView() {
    return (
      <Image source={require(‘./img/background.png‘)} style={styles.backgroundLoading}>
      <ActivityIndicatorIOS
        style={[styles.centering, {height: 80}]}
        size="large"
        color="#ffffff"
       />
      </Image>
    );
  },

  renderList(){
    return (
      <Image source={require(‘./img/background.png‘)} style={styles.backgroundImg}>
        <ListView
          dataSource={this.state.users}
          renderRow={this.renderRow}
          style={styles.fullList}
          renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
         />
      </Image>
    );
  },
  renderRow(user){
    return (
      <TouchableHighlight
        onPress={() => this.rowClicked(user)}
        underlayColor = ‘#ddd‘>
      <View style={styles.rightCongtainer}>
        <Text style={styles.whiteText}>{user.nickname}</Text>
        <Text style={styles.whiteText}>{user.realname}</Text>
      </View>
      </TouchableHighlight>
    );
  },
  rowClicked(user){
    console.log(user);
  },
});

Styles如下

const styles = StyleSheet.create({
  backgroundImg:{
    flex:1,
    width: null,
    height: null,
    flexDirection: ‘row‘
  },
  backgroundLoading:{
    flex:1,
    width: null,
    height: null,
    alignItems: ‘center‘,
    justifyContent: ‘center‘,
    flexDirection: ‘row‘
  },
  thumbnail: {
    width: 60,
    height: 60,
  },
  rightCongtainer:{
    flex:1,
  },
  fullList:{
    flex:1,
    paddingTop: 64,
  },
  separator: {
   height: 0.5,
   backgroundColor: ‘rgba(255,255,255,0.5)‘,
 },
 centering: {
    alignItems: ‘center‘,
    justifyContent: ‘center‘,
  },
  whiteText:{
    fontSize:20,
    color:‘rgb(255,255,255)‘,
    backgroundColor:‘rgba(255,255,255,0)‘,
    textAlign:‘left‘,
    marginLeft:10,
  },
  blackText:{
    fontSize:20,
    color:‘rgb(0,0,0)‘,
    backgroundColor:‘rgba(255,255,255,0)‘,
    textAlign:‘center‘,
    marginLeft:10,
  },
  container: {
    flex: 1,
    backgroundColor: ‘white‘,
    justifyContent: ‘center‘,
  },
});

这时候，save，command+R后，发现再网络请求的时候会先显示小菊花转转转，然后加载完毕之后，显示一个List
技术分享

加载Spinner（仅适用于iOS）

这个在上面的代码中提到了

renderLoadingView() {
    return (
      <Image source={require(‘./img/background.png‘)} style={styles.backgroundLoading}>
      <ActivityIndicatorIOS
        style={[styles.centering, {height: 80}]} //风格
        size="large" //大小
        color="#ffffff" //颜色
       />
      </Image>
    );
  },

控制台打印

上文的代码里提到

   rowClicked(user){
    console.log(user);
   },

使用console.log来实现控制台

这时候，我们在点击某一行，会看到XCode中输出

在Chrome中调试

使用Command+control+Z来调出调试窗口，然后选择Debug in chrome

这时候，App会和Chrome建立一个socket连接，这样在Chrome中就可以进行调试了。

打开Chrome开发者工具

技术分享
点击某一行，就会发现在chrome的控制台进行log了

添加一个详情页，并且传值

新建一个Component来表示详情页

var DetailScreen = React.createClass({
  render(){
    return (
      <View style= {styles.container}>
        <Text style={styles.blackText}>{this.props.user.nickname}</Text>
        <Text style={styles.blackText}>{this.props.user.realname}</Text>
      </View>
    );
  }
});

然后，在rowClick中，跳转到详情页

  rowClicked(user){
    console.log(user);
    this.props.navigator.push({
      title: "详情页",
      component: DetailScreen,
      passProps: {user:user},
    });
  },

Tips:

  • NavigatorIOS可以通过this.props.navigator来访问
  • 通过 this.props.navigator.push来跳转，通过passProps: {user:user}来传递值
  • 每个Component的类都有两个全独享，this.props表示参数，this.state表示当前的状态。可以用来存储和传递数据

简单提一下React Native的性能

在RN中，主要有两个线程

  • JavaScript线程
  • 主线程（UI线程）

其中，JavaScript是React Native的JS代码执行线程，React Native的触摸处理，网络请求，视图配置，以及app的业务逻辑都是发生在这里的。主线程是实际原生代码绘制视图的执行线程。使用React Native的时候，往往会遇到JavaScript线程执行逻辑过多，没有办法及时响应UI线程，导致掉帧.所以，React Native的性能，较纯原生的还是要差一些的

后续

Reactive Native实战解析（中）会继续讲解一些基础控件的适用，然后也会写一个demo的app，Reactive Native实战解析（下）会写一个相对完善点的应用，作为这个入门系列的终结。然后，计划写一两篇混合编程的，最近比较忙，这个系列慢慢更新吧

附录，最终的index.ios.js全部代码

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

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  ListView,
  Text,
  View,
  Image,
  ActivityIndicatorIOS,
  Navigator,
  TouchableHighlight,
  TouchableOpacity,
  NavigatorIOS,
} from ‘react-native‘;

var REQUEST_URL = ‘https://raw.githubusercontent.com/LeoMobileDeveloper/React-Native-Files/master/person.json‘;

var ListScreen = React.createClass({
  getInitialState: function() {
    return {
      loaded: false,
      users: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
    };
  },
  componentDidMount() {
    this.fetchData();
  },
  fetchData() {
   fetch(REQUEST_URL)
     .then((response) => response.json())
     .then((responseData) => {
       this.setState({
         users: this.state.users.cloneWithRows(responseData),
         loaded: true,
       });
     })
     .done();
  },

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

  renderLoadingView() {
    return (
      <Image source={require(‘./img/background.png‘)} style={styles.backgroundLoading}>
      <ActivityIndicatorIOS
        style={[styles.centering, {height: 80}]}
        size="large"
        color="#ffffff"
       />
      </Image>
    );
  },

  renderList(){
    return (
      <Image source={require(‘./img/background.png‘)} style={styles.backgroundImg}>
        <ListView
          dataSource={this.state.users}
          renderRow={this.renderRow}
          style={styles.fullList}
          renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
         />
      </Image>
    );
  },
  renderRow(user){
    return (
      <TouchableHighlight
        onPress={() => this.rowClicked(user)}
        underlayColor = ‘#ddd‘>
      <View style={styles.rightCongtainer}>
        <Text style={styles.whiteText}>{user.nickname}</Text>
        <Text style={styles.whiteText}>{user.realname}</Text>
      </View>
      </TouchableHighlight>
    );
  },
  rowClicked(user){
    console.log(user);
    this.props.navigator.push({
      title: "详情页",
      component: DetailScreen,
      passProps: {user:user},
    });
  },
});

var DetailScreen = React.createClass({
  render(){
    return (
      <View style= {styles.container}>
        <Text style={styles.blackText}>{this.props.user.nickname}</Text>
        <Text style={styles.blackText}>{this.props.user.realname}</Text>
      </View>
    );
  }
});

var LeoRNWeather = React.createClass({
  render: function() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          title: ‘主页‘,
          component: ListScreen,
        }}
      />
    );
  }
});

const styles = StyleSheet.create({
  backgroundImg:{
    flex:1,
    width: null,
    height: null,
    flexDirection: ‘row‘
  },
  backgroundLoading:{
    flex:1,
    width: null,
    height: null,
    alignItems: ‘center‘,
    justifyContent: ‘center‘,
    flexDirection: ‘row‘
  },
  thumbnail: {
    width: 60,
    height: 60,
  },
  rightCongtainer:{
    flex:1,
  },
  fullList:{
    flex:1,
    paddingTop: 64,
  },
  separator: {
   height: 0.5,
   backgroundColor: ‘rgba(255,255,255,0.5)‘,
 },
 centering: {
    alignItems: ‘center‘,
    justifyContent: ‘center‘,
  },
  whiteText:{
    fontSize:20,
    color:‘rgb(255,255,255)‘,
    backgroundColor:‘rgba(255,255,255,0)‘,
    textAlign:‘left‘,
    marginLeft:10,
  },
  blackText:{
    fontSize:20,
    color:‘rgb(0,0,0)‘,
    backgroundColor:‘rgba(255,255,255,0)‘,
    textAlign:‘center‘,
    marginLeft:10,
  },
  container: {
    flex: 1,
    backgroundColor: ‘white‘,
    justifyContent: ‘center‘,
  },
});

AppRegistry.registerComponent(‘LeoRNWeather‘, () => LeoRNWeather);

React Native入门－实战解析（上）

标签：

原文地址：http://blog.csdn.net/hello_hwc/article/details/51206637
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！