Reactnative学习笔记(一)

react文章/教程1年前 (2023)发布勤奋小助

0 0

React-native学习笔记系列文章以React-Native学习指南上提到的内容为主要参考资料，有兴趣同学可以参考继续学习。

目前，Facebook出了iOS版和Web版本，Android版预计今年(2015)8月份会发布，我的计划是写4篇iOS版的和1篇Web版的，当然了，开发环境是Mac OS X 10.10,下面是目录，更新后会添加上链接。

iOS版:

1.配置React-native开发环境，做一个新闻列表。

2.如何使用React-native组件，做一个多组件的app，做成哪样还没想好。

3.如何使用React-native精确布局,当然了会写一个小demo，名字还没想好。

4.如何在现有OC程序中部分使用React-native，也搞个小demo，能用就行。

Web版：

5.从Web开发的角度理解React-native，我主要想写的是如何用React-native写前端和React-native是如何让Web和iOS统一的。

配置React-native开发环境，做一个新闻列表。

首先是安装开发环境，好了，你可以打开终端和我一起无聊的敲命令了，奥，不是敲是粘贴。

1.安装 homebrew (homebrew 是一个工具，通过它你可以用brew命令安装下面的很多工具)

ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

2.安装 node (react-native 需要一个服务器端跟他返回数据嘛)

brew install node

3.安装watchman (搞不懂是什么东西，不重要，安装就好了)

brew install watchman

4.安装npm (和cocoapods类似的一个东西，安装node都会装)

npm install

5.安装 react-native 命令行工具

sudo npm install -g react-native-cli

6.创建一个 react-native 项目 (名字叫:AwsomeProject)

react-native init AwsomeProject

顺便提一句，我不知道上面这些有没有涉及到***的地址，如果发现连接失败，请把ruby环境更换成淘宝的ruby镜像。

做到这，你基本就已经大功告成了，你已经创建了一个叫做AwsomeProject名字的iOS工程，上面那个是工程目录，下面那个目录是node.js的目录，你可以像平时一样启动程序，它将是一个空白程序。 Reactnative学习笔记(一)

下面这个截图是它的appDelegate，很容易你就可以看明白，它在网络上请求了一个文件，用这个文件来生成了一个view，并将这个view作为rootVc的view,至于怎么把这个view转化过来的先不讨论。现在你很自然的想到我们需要编码的就是上面url对应的文件，这个文件就在我们工程目录里，index2.ios.js,顺便说一句文件名随便取，对应就行。

又到了贴代码时间：

 //获取react-native 模块
var React = require('react-native');
// 写了这个在AppRegistry，Image前面就不用加React了。(不怎么会描述了)
var {
  AppRegistry,
  Image,
  StyleSheet,
  Text,
  View,
  ListView,
} = React;

//类似于Css，控制样式的
var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginBottom:10,
  },
  thumbnail: {
    width: 40,
    height: 60,
    marginTop:5,
    
  },
  rightContainer: {
     flex: 1,
     paddingLeft:10,
     
  },
  line: {
    width:500,
    height:1,
    backgroundColor:'black',
  },
  title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: 'left',
  },
  year: {
    textAlign: 'left',
  },
  listView: {
    paddingTop: 20,
    paddingLeft:10,

    backgroundColor: '#F5FCFF',
  },
});

//拼接成一个链接而已
var API_KEY = '7waqfqbprs7pajbz28mqf6vz';
var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';
var PAGE_SIZE = 25;
var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;
var REQUEST_URL = API_URL + PARAMS;

//定义一个类
var AwesomeProject = React.createClass({

//初始化数据
  getInitialState: function() {
    return {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  },

//componentDidMount是React组件中的一个函数，它只会在组件加载完成之后被调用一次。类似于ios 中viewdidlown方法
  componentDidMount: function() {
    this.fetchData();
  },
//请求网络数据
  fetchData: function() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
          loaded: true,
        });
      })
      .done();
  },

//如果数据还没有加载调用这个方法
  renderLoadingView: function() {
    return (
      <View style={styles.container}>
        <Text>
          Loading movies...
        </Text>
      </View>
    );
  },

//如果数据已经加载调用这个方法(它是一列的界面)
  renderMovie: function(movie) {
    return (
      <View>
          <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>
        <View style={styles.line}>
        </View>
    </View>
    );
  },
  
//这个方法最后返回的就是对应的界面
 render: function() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    };

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


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

代码上我都做了一定注释就不详谈了，你可以修改了玩一玩，整个语法是js语法。render 是输出界面的，除了这个方法，在React.createClass里其它方法都是给他调用或者系统自动调用的，还有呢就是样式，写法和css差不多。还有几句话呢照着写就行了，后面再介绍它的意思，顺便说一句：这个js的写法是jsx语法，它对js语法进行了扩展，在js里可以写html代码，看起来和angularjs的语法还有点像，其实还是本质上不同的，一个是js里写html，一个html写js。下面把这个demo的运行效果截个图， Reactnative学习笔记(一) 大功告成，你看是不是很像iOS里的tableview呢。

更大家搞点延生阅读，以更好的了解React-native(大多是一些对比优缺点呀什么的，有的时候不学不要紧，还是要知道嘛).

知乎上讨论得很热闹，看完你也基本就知道React-native 到底是个啥情况了：http://www.zhihu.com/question/27852694 本来准备再搞点别的资料的，一看这内容这么多，看看这个也就够了

转载于:https://www.cnblogs.com/hkJser/articles/4452317.html

本文来源爱码网，其版权均为原网址所有与本站无关，文章内容系作者个人观点，不代表本站对观点赞同或支持。如需转载，请注明文章来源。