.map native react

2015-11-03 18:17:04 minkowsky 阅读数 7497
  • 1.JHipster简介

    学习和掌握U-Net图像语义分割技术来训练自己的数据集 学习U-Net语义分割原理 学习使用labelme图像标注 学习Kaggle参数流程

    438人学习 刘宏强
    免费试看

原文地址:

http://www.csdn.net/article/2015-09-30/2825835-react-native-2

上一篇文章提到了 React Native 的环境配置和基本的开发调试。本文介绍 React Native 中的资源打包,重点介绍使用 react-native-gradle 插件进行 Android APP 的打包。

关于打包

打包目的

除了热部署,我们知道,APP 运行的时候不应再从 Debug Server 获取资源。分发应用时 JS 资源应该被打包到 APP 中。

另外对外发布的安装包,资源中的业务代码的混淆也是必须的。

React Native 打包方式

目前 iOS 应用可用 react-native bundle 命令进行打包,同时对 Android 的支持工作也已经开始了。但在目前 npm 中最新的版本(0.11.4)暂时还不支持。 最新的代码中看似已经支持了,但还没最终发布。等正式发布支持了,我另写一篇文章介绍使用 react-native bundle 命令进行打包。

目前对于 Android 的 React Native 应用,可用 react-native-gradle 插件进行打包。该插件灵活配置打包参数,使用 Gradle Task 将资源打包到资源文件夹。

但 官方计划使用 react-native bundle 命令进行打包,并且有放弃对 Gradle 插件支持的倾向。

都使用 react-native bundle 进行打包,对开发人员来说,只要掌握一套打包命令即可。但是对于 Android 的开发者来说,插件方式似乎更符合平时的开发习惯。各位自行取舍。

React Native 开发目前非常活跃,代码变迭频繁,本文所讨论的代码版本为:https://github.com/facebook/react-native/tree/0ff3a421c9adbe4137e07e158c9812062b34ea5a 
本文中目前所指的时间为: 2015年09月28日20点,太平洋时间;中国2015年09月29日11点。

react-native-gradle 插件

编译插件

借助插件 react-native-gradle: com.facebook.react:gradleplugin:1.0.+可完成混淆及资源打包。

然而这个插件并没有发布到 JCenter 或者 Maven Centry。需要自己编译,然后发布到本地 Maven 库。源码在 react-native-gradle目录下。按照 文档编译安装:

mac-2:react-native-gradle srain$ gradle build install

结果是测试用例报错,这个问题,官方一直没修复,且置之不理。 给出的解释前面提到了。

我们可跳过测试用例,直接安装。虽然官方提供的测试用例本身有问题,无法进行测试,但我亲测可用。

题外话,对于给出的解释,显得非常不讲究,目前整个项目处于高度活跃中,文档和实际功能严重脱节,很多不一致的地方。 看来任何团队都会面临项目压力,变得节奏不再优雅啊,所谓的理想团队都是瞬时态。

跳过测试用例,直接安装:

mac-2:react-native-gradle srain$ gradle install

安装完成:

mac-2:react-native-gradle srain$ ll ~/.m2/repository/com/facebook/react/gradleplugin/
total 8
drwxr-xr-x  5 srain  staff  170 Sep 28 15:10 1.0.0-SNAPSHOT
-rw-r--r--  1 srain  staff  326 Sep 28 15:10 maven-metadata-local.xml

在项目中使用

build.gradle 配置如下:

  1. buildscript {  
  2.     repositories {  
  3.         mavenLocal()    // 本地依赖  
  4.         jcenter()  
  5.     }  
  6.     dependencies {  
  7.         classpath 'com.android.tools.build:gradle:1.3.0'  
  8.         classpath 'com.facebook.react:gradleplugin:1.0.+'   // 插件依赖  
  9.     }  
  10. }  

app/build.gradle:

  1. apply plugin: 'com.facebook.react'  
  2.   
  3. react {  
  4.     bundleFileName "index.android.bundle"   // assets 目录下 js 文件名  
  5.     bundlePath "/index.android.bundle"      // js 路径  
  6.     jsRoot "../"                            // js 源文件位置  
  7.     packagerHost "localhost:8081"           // debug server 地址  
  8.     packagerCommand "./node_modules/react-native/packager/packager.sh"  // 打包命令地址  
  9.   
  10.     devParams {  
  11.         skip true  
  12.         dev true  
  13.         inlineSourceMap false  
  14.         minify false  
  15.         runModule true  
  16.     }  
  17.     releaseParams {  
  18.         skip false  
  19.         dev false  
  20.         inlineSourceMap false  
  21.         minify true  
  22.         runModule true  
  23.     }  
  24. }  

配置说明

上面 react 项中的配置已经在注释中说明。其中,packagerCommand 官方给出的文档描述有误

  • devParams 和 releaseParams 分别 debug 版本和 release 版本的参数。它们各有五个参数:
  • skip 参数为 true 则跳过从本地资源加载,从 Debug Server 请求资源。为 false 时从打包资源,运行时,从本地加载。

其他四个参数通过 url 传给 Debug Server。比如:http://localhost:8081/index.android.bundle?dev=true&inlineSourceMap=true&minify=false&runModule=true。

参数意义如下:

  1. dev: 等同于全局变量 __DEV__, React Native 核心类库的开发选项。
  2. minify: 混淆。
  3. inlineSourceMap: 是否加入 source map。默认为 false。
  4. runModule: 默认为 true,是否在最后以 require(XXX) 的形式加入 module 的入口点。如:require("AwesomeProject/index.android.js");

参数的英文说明文档在: https://github.com/facebook/react-native/blob/master/packager/README.md

打包

每次打包,插件都会根据配置,决定是否打包以及以怎样的配置打包资源。

Demo

这里是一个 Demo: https://github.com/liaohuqiu/ReactNativeTestGradlePlugin

Demo 主要演示了 build.gradle 的配置,用 Android Stuido 打开即可运行,不要修改 Dev Setting 中的 Debug Server,因为资源都已经打包,不再在从 Debug Server 下载。可以解开 debug.apk 看 assets 目录下的文件。

其中包含了一个编译安装 react-native-gradle 到本地 Maven 库的脚本,运行即可。

react-native bundle 命令简介

命令用法如下:

mac-2:AwesomeProject srain$ react-native bundle --help
Usage: react-native bundle [options]

Options:
  --dev     sets DEV flag to true,同插件配置的 dev 
  --minify  minify js bundle,同插件配置的 minify
  --root        add another root(s) to be used in bundling in this project
  --assetRoots      specify the root directories of app assets
  --out     specify the output file, 输出文件的位置
  --url     specify the bundle file url,js bundle 路径

对 iOS 打包时:

react-native bundle --minify

本文写于旅途,从洛杉矶到旧金山的 greyhound 大巴车上。时间仓促,水平有限,如有谬误,还请纠正,原始文档在这里

2018-08-02 17:50:29 DZh_Ming 阅读数 5562
  • 1.JHipster简介

    学习和掌握U-Net图像语义分割技术来训练自己的数据集 学习U-Net语义分割原理 学习使用labelme图像标注 学习Kaggle参数流程

    438人学习 刘宏强
    免费试看

map方法的作用不难理解,“映射”嘛,也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方:


var data = [1, 2, 3, 4];

var arrayOfSquares = data.map(function (item) {
  return item * item;
});

alert(arrayOfSquares); // 1, 4, 9, 16
callback需要有return值,如果没有,就像下面这样:
var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function() {});

arrayOfSquares.forEach(console.log);

结果如下图,可以看到,数组所有项都被映射成了undefined:

在实际使用的时候,我们可以利用map方法方便获得对象数组中的特定属性值们。例如下面这个例子(之后的兼容demo也是该例子):

var users = [
  {name: "张含韵", "email": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];

var emails = users.map(function (user) { return user.email; });

console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com

2017-11-27 14:43:09 zeping891103 阅读数 3671
  • 1.JHipster简介

    学习和掌握U-Net图像语义分割技术来训练自己的数据集 学习U-Net语义分割原理 学习使用labelme图像标注 学习Kaggle参数流程

    438人学习 刘宏强
    免费试看

在实际的项目开发过程中,以数组为格式对组件进行渲染的情况是经常出现的,如裂变的渲染。在React中,如果数组项item不为元素标签时,通常用arr.map(function (item,index) { return 组件或元素 })遍历数组并渲染。

当数组项为字符串时:

var Demo1 = React.createClass({
	render:function(){
		var names = ['Alice', 'Emily', 'Kate'];
		return (
			<div>
				{
					names.map(function (name,index) {
						var theKey = "key"+index;
			      		return <div key={theKey}>Hello, {name}!</div>
			    	})
				}
			</div>
		);
	}
});
ReactDOM.render(<Demo1 />,document.getElementById("example"));

当数组项为标签元素时:

var Demo2 = React.createClass({
	render:function(){
		var arr = [
			<h1 key="key1">Hello World</h1>,
			<h2 key="key2">Hello World</h2>
		];
		return (
			<div>{arr}</div>
		);
	}
});
ReactDOM.render(<Demo2 />,document.getElementById("example"));

当数组项为对象时:

var LiItem = React.createClass({
    render: function() {
      return <li>{this.props.data.name}</li>;
    }
});
var App = React.createClass({
    render: function () {
      return (
        <ul>
            {
	            this.props.results.map(function(result,index){
	            	return <LiItem key={result.id} data={result} />;
	            })
            }
        </ul>
      );
    }
});
var results = [
    {id:'key1', name:'key1_data'},
    {id:'key2', name:'key2_data'},
    {id:'key3', name:'key3_data'}
];
ReactDOM.render(
	<App results={results} />,
	document.getElementById('example')
);

 

2019-03-22 16:27:00 qq_37815596 阅读数 3225
  • 1.JHipster简介

    学习和掌握U-Net图像语义分割技术来训练自己的数据集 学习U-Net语义分割原理 学习使用labelme图像标注 学习Kaggle参数流程

    438人学习 刘宏强
    免费试看

 

  • react map遍历(截取部分重要代码)
{this.state.images.map((img, i) => {
    return (
        <div className="swiperBox" key={"img" + i}>
            <p className="swiperP">
                Updated:{img.left ? img.left.date : img.right.date}
            </p>
        </div>
    );
})}

或者

            {this.props.socks &&
              this.props.socks.map((sock, i) => {
                let randomId = Math.round(Math.random() * 10000);
                let sockDiv = (
                  <Table.Row key={"sock-list" + randomId + i}>
                    <Table.Cell>{sock.mac}</Table.Cell>
                    <Table.Cell>{sock.sn}</Table.Cell>
                    <Table.Cell>{sock.authCode}</Table.Cell>
                    <Table.Cell>{sock.foot}</Table.Cell>
                  </Table.Row>
                );
                return sockDiv;
              })}

 

  • react native map遍历(截取部分重要代码)

 

{this.props.forecastList && this.props.forecastList.daily_forecast && this.props.forecastList.daily_forecast.map((infor, i) => {
                    let weatherDiv =(
                        <View style={ForecastStyle.list} key={"forecast-list" + i}>
                            <View style={ForecastStyle.list1}>
                                <Text style={ForecastStyle.list_date}>{infor[i]&&infor[i].date.split("-")[2]}日</Text>
                                <Text style={ForecastStyle.list_day}>今天</Text>
                            </View>
                            <View style={ForecastStyle.list2}>
                                {(infor[i]&&infor[i].cond.txt_n) === "多云" ? <Cloudy /> : null}
                                <Text style={ForecastStyle.list_weather}>{infor[i]&&infor[i].cond.txt_n}</Text>
                            </View>
                            <View style={ForecastStyle.list3}>
                                <Text style={ForecastStyle.list_tmp}>{infor[i]&&infor[i].tmp.min}~{infor[i]&&infor[i].tmp.max}℃</Text>
                            </View>
                        </View>
                    );
                    return weatherDiv
                })}

 

2019-08-09 11:24:58 qq_34273059 阅读数 1476
  • 1.JHipster简介

    学习和掌握U-Net图像语义分割技术来训练自己的数据集 学习U-Net语义分割原理 学习使用labelme图像标注 学习Kaggle参数流程

    438人学习 刘宏强
    免费试看
需求 : react-native项目中需要使用高德地图组件;有基本的轨迹以及marker功能;
  • react-native-amap-geolocation
  • react-native-smart-amap
  • react-native-amap3d
  • react-native-maps

    对比了一些,感觉比较全的还是react-native-community的react-native-maps ;but没找到其可以使用高德地图,只能使用Google map?!!于是,只好选其他的了,最终选择了eact-native-amap3d,效果以及简单使用如下:

import React, {Component} from 'react';
import {Platform, StyleSheet, View} from 'react-native';
import { MapView,Marker,Polyline,Polygon } from 'react-native-amap3d';

var Dimensions = require('Dimensions');
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;



class CarDetailsPage extends Component {
  constructor(props) {
    super(props);
    console.disableYellowBox = true;
    this.state = {
    //****
    };
  }
  componentWillMount () {  
  }

 
  render() {  
    return (
      <Container>
        <View style={{ flex: 1 }}>
          <MapView
            draggable
              coordinate={ {
                  latitude: 40.006901,
                  longitude: 116.097972,
                }}
              mapType={'standard'}
              zoomLevel={12}
              zoomEnabled={true}
              scrollEnabled={true}
              rotateEnabled={true}
              style={styles.mapStyles}
              showsZoomControls={false}
              zoomLevel={15}
          >      
    
			//画marker 
            <Marker 
              key={navigation.getParam('currentCarName','')}
              active
              title={navigation.getParam('currentCarName','')}
              color='blue'
              description={'battery:'+this.props.carwebsocket.carstatus.battery}
              coordinate={ {
                  latitude: 40.006901,
                  longitude: 116.097972,
                }}/>
                 
        	
        	//画框
            <Polygon 
            coordinates={gps} 
            fillColor={'transparent'} 
            strokeColor={'#1398E2'} 
            strokeWidth={4}
            ></Polygon>  
                 
            //画线条
            <Polyline
              width={10}
              color='rgba(255, 0, 0, 0.5)'
              
              coordinates={[
                {
                  latitude: 40.006901,
                  longitude: 116.097972,
                },
                {
                  latitude: 40.006901,
                  longitude: 116.597972,
                },
                {
                  latitude: 39.706901,
                  longitude: 116.597972,
                },
              ]}
            />      
           

          </MapView>
         
  

         </View>
      </Container>
    );
  }
}
const styles = {
  mapStyles:{
    height:deviceHeight,
    width:deviceWidth
  }
}

export default CarDetailsPage;

虽然react-native-amap3d个人觉得稍微有些组件不够丰富完善,有些遗憾;但是基础功能是够用的,以及配置使用还是比较方便的