React Native ——入门环境搭配以及简单实例

Z时代
2024-01-10
分类：综合

react

首先我们需要获取 Homebrew

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

1、我们可以先通过在终端输入： brew -v

　　如果没有安装就输入Homebrew的镜像路径去下载

2、拥有了brew，就可以通过它去下载一些依赖了，比如node，我们可以在终端输入：brew install node,如果提示 already installed说明已经下载过了

3、下载watchman，终端输入：brew install watchman，它是用来检测文件变化的一个工具，如果提示 already installed说明已经下载过了

4、然后可以下载flow，终端输入：bre install flow ,它是用来检测jsx语法的工具，如果提示 already installed说明已经下载过了

5、安装完依赖之后，我们就通过npm来安装react Native的命令行工具，终端输入：npm install -g react-native-cli

6、这个时候我们就可以通过命令行来创建一个HelloWorld：react-native init HelloWorld ，过程会比较久一点呐

　　如果确实是太久，那就应该是npm加载的问题啦，可以换成淘宝的镜像（http://npm.taobao.org/），终端输入：

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

7、又或者是要取得权限，终端输入：sudo react-native init HelloWorld

二、demo。

1、demo1:首页显示一张图片和文字，图片不能仅仅通过构建控件，还需要设置宽高［通过index.ios.js文件进行修改］

 1 /**
 2  * Sample React Native App
 3  * https://github.com/facebook/react-native
 4  */
 5 'use strict';//表示在严格模式下的JS文件
 6 
 7 var React = require('react-native');//定义react组件的依赖
 8 
 9 //demo：增加一个Image属性
10 var MOCKED_MOVIES_DATA = [
11   {title: 'myTitle', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
12 ];
//等同于 var React = AppRegistry;这样的简化，这是ES6的写法
　　//每一个属性对应的是React里面提供的组件
13 var {
14   AppRegistry,
15   Image,
16   StyleSheet,
17   Text,
18   View,
19 } = React;
20 
21 var HellWorld = React.createClass({
22   render: function() {
23 
24     var movie = MOCKED_MOVIES_DATA[0];
25 
26     return (
27       <View style={styles.container}>
28 
29         <Text >{movie.title}</Text>
30 
31         <Image
32           source={{uri:movie.posters.thumbnail}}
33           style={styles.thumbnail}
34         />
35 
36       </View>
37     );
38   }
39 });
40 
41 var styles = StyleSheet.create({
42   container: {
43     flex: 1,　　　　　　　　　　　　//flexbox
44     justifyContent: 'center',  //垂直居中
45     alignItems: 'center',
46     backgroundColor: '#F5FCFF',
47   },
48   thumbnail:{
49     width:53,
50     height:90,   //长度无单位，默认PT
51   },
52 });
53 
54 
55 //注册组件：ES6的写法，引号内是组件名字，后面是返回对应的组件
56 AppRegistry.registerComponent('HellWorld', () => HellWorld);

2、demo2:在1 的基础上构造一个列表，通过网络数据请求动态绑定

  1 /**
  2  * Sample React Native App
  3  * http://www.cnblogs.com/daomul/
  4  */
  5 'use strict';
  6 
  7 /*网络请求URL*/
  8 var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
  9 
 10 var React = require('react-native');
 11 
 12 var {
 13   AppRegistry,
 14   Image,
 15   StyleSheet,
 16   Text,
 17   View,
 18   ListView,
 19 } = React;
 20 
 21 var HellWorld = React.createClass({
 22 
 23   getInitialState:function(){
 24     return {
 25       dataSource:new ListView.DataSource({
 26         rowHasChanged: (row1,row2) => row1 !== row2
 27       }),
 28       loaded:false,
 29     }
 30   },
 31   componentDidMount:function(){
 32     this.fetchData();
 33   },
 34   render: function() {
 35     if (this.state.loaded) {
 36         return this.renderList();
 37     }else {
 38         return this.renderLoadingView();
 39     }
 40   },
 41   renderList:function(){
 42     return (<ListView
 43                 dataSource={this.state.dataSource}
 44                 renderRow={this.renderListItem}
 45                 style={styles.listView}
 46             />);
 47   },
 48   renderListItem:function(movie){
 49     return <View style={styles.container}>
 50 
 51       <Image
 52         source={{uri:movie.posters.thumbnail}}
 53         style={styles.thumbnail}
 54       />
 55       <View style={styles.rightContainer}>
 56         <Text style={styles.title}>{movie.title}</Text>
 57         <Text style={styles.year}>{movie.year}</Text>
 58       </View>
 59     </View>;
 60   },
 61   renderLoadingView:function(){
 62     return <View style={styles.listView}>
 63               <Text>loading.....</Text>
 64           </View>;
 65   },
 66 
 67   //负责数据的抓取
 68   fetchData:function(){
 69     fetch(REQUEST_URL)
 70       .then((response)=>response.json())
 71       .then((responseData)=>{
 72         this.setState({
 73             dataSource:this.state.dataSource.cloneWithRows(responseData.movies),
 74             loaded:true,
 75         });
 76       })
 77       .done();/*调用.done不然有错误信息会被吃掉的*/
 78   },
 79 });
 80 
 81 /*flexDirection:'row' 子容器按照水平方向来flex*/
 82 var styles = StyleSheet.create({
 83   container: {
 84     flex: 1,
 85     justifyContent: 'center',
 86     flexDirection:'row',
 87     alignItems: 'center',
 88     backgroundColor: '#F5FCFF',
 89   },
 90   thumbnail:{
 91     width:53,
 92     height:90,
 93   },
 94   rightContainer:{
 95     flex:1,
 96   },
 97   title:{
 98     fontSize:20,
 99     marginBottom:8,
100     textAlign:'center',
101   },
102   year:{
103     textAlign:'center',
104   },
105   listView:{
106     paddingTop:20,
107     backgroundColor:'#F5FCFF',
108   }
109 });
110 
111 AppRegistry.registerComponent('HellWorld', () => HellWorld);