React-Native图标、启动页、打包

上传图片至 http://makeappicon.com/ 邮箱下载
下载文件  ios/AppIcon.appiconset 文件夹整体复制
覆盖工程ios/工程名/Images.xcassets/AppIcon.appiconset
重启工程

工程修改名称

sublime打开 ios/工程名/Info.plist
    <key>CFBundleDevelopmentRegion</key>
    <string>zh_CN</string>
    <key>CFBundleDisplayName</key>
    <string>想要显示的名称</string>

修改启动页

sublime打开 ios/工程名/Base.lproj/LaunchScreen.xib
文本:直接搜索修改
图片:替换

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28
<view contentMode="scaleAspectFill" id="iN0-l3-epB">

<rect key="frame" x="0.0" y="0.0" width="630" height="753"/>

<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>

<subviews>

<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" image="Splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="5LC-cn-d0c">

<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>

<constraints>

<constraint firstAttribute="width" secondItem="5LC-cn-d0c" secondAttribute="height" multiplier="375:667" id="wcc-Hi-qqW"/>

</constraints>

</imageView>

</subviews>

<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>

<constraints>

<constraint firstItem="5LC-cn-d0c" firstAttribute="centerX" secondItem="iN0-l3-epB" secondAttribute="centerX" id="E9 大专栏  React-Native图标、启动页、打包l-Ov-rY9"/>

<constraint firstItem="5LC-cn-d0c" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="QjV-Kf-fsL"/>

<constraint firstItem="5LC-cn-d0c" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" id="XTr-0R-xje"/>

<constraint firstItem="5LC-cn-d0c" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="centerY" id="zu0-Ez-CoZ"/>

</constraints>

<nil key="simulatedStatusBarMetrics"/>

<nil key="simulatedTopBarMetrics"/>

<nil key="simulatedBottomBarMetrics"/>

<freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>

<point key="canvasLocation" x="675" y="497.5"/>

</view>

<resources>

<image name="Splash.png" width="375" height="667"/>

</resources>

更改两处图片名称
把图标放在ios目录下
进入 xconde-General-App Icons and Lanuch Images 小箭头
图片拖到第二栏空白处 重启项目

打包

IOS

react-native 发布流程
准备工作
1.苹果开发者帐号一枚
https://developer.apple.com/
2.蒲公英应用测试号一枚
https://www.pgyer.com/
开发者中心
1.登陆
点击 Certificates,IDs & Profiles
2.Devices -> ALL->添加设备UDID
3.Identifiers -> App IDs -> 添加APP ID也就是bounld ID
4.最下面 Provisioning Profiles -> Distribution->添加描述文件->点击添加->Ad Hoc->继续->选中之前添加的App ID->继续->选中证书->继续->选择设备->继续->添加描述文件名称-进入到下载描述文件页,点击下载

导入xcode后调整上栏运行环境为 Generic IOS Device
选择product下的Archive

Android

没有亲自测试但找了两个网站

React—native+Android环境搭建和开发配置(Mac)

http://blog.csdn.net/pcaxb/article/details/52046438

React Native安卓项目打包APK

http://www.jianshu.com/p/32a99c273be1

原文地址:https://www.cnblogs.com/liuzhongrong/p/12262818.html

时间: 2024-11-06 07:07:20

React-Native图标、启动页、打包的相关文章

React Native发布APP之打包iOS应用

用React Native开发好APP之后,如何将APP发布以供用户使用呢?一款APP的发布流程无外乎:签名打包->发布到各store这两大步骤.本文将向大家分享如何签名打包一款React Native APP. 在本文中我将为大家讲解如何打包和发布React Native iOS App. 关于打包React Native Android应用请查看<React Native发布APP之签名打包APK> 第一步:导出js bundle包和图片资源 和打包React Native Andr

iOS-APP图标和启动页的尺寸

图标 启动页 补:创建启动页Image

React Native Android 源码框架浅析(主流程及 Java 与 JS 双边通信)

[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 有了前面<React Native Android 从学车到补胎和成功发车经历>和<React Native Android Gradle 编译流程浅析>两篇文章的学习我们 React Native 已经能够基本接入处理一些事情了,那接下来的事情就是渐渐理解 RN 框架的一些东西,以便裁剪和对 RN 有个更深入的认识,所以本篇总结了我这段时间阅读源码

React Native移植iOS原生项目

手工集成React Native 第一步:初始化React Native环境 在我们要集成的项目中,进入到*.xcodeproj文件的上级目录,运行React Native初始化命令react-native init [Project Name]会出现prompt, 输入yes,这样会在ios目录下生成一个同名工程.init过程会需要一点时间,耐心等待. 完成后项目文件目录会变成这样: node_modules:react native依赖包 ios:iOS项目相关代码,Xcode工程文件 an

[转] 在React Native中使用ART

http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下React Native ART 现在手上闲下来了和大家分享一下React Native中的ART使用心得 React Native ART 究竟是什么? 所谓ART,是一个在React中绘制矢量图形的JS类库.这个类库抽象了一系统的通用接口,统一了SVG,canvas,VML这类矢量图形在 React中

最火移动端跨平台方案盘点:React Native、weex、Flutter

1.前言 跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头. 为什么我们需要跨平台开发? 本质上,跨平台开发是为了增加代码复用,减少开发者对多个平台差异适配的工作量,降低开发成本,提高业务专注的同时,提供比web更好的体验.嗯-通俗了说就是:省钱.偷懒. 目前移动端跨平台开发中,备受关注的方案大致归纳为以下几种情况: 1)react native.weex均使

React Native 简介:用 JavaScript 搭建 iOS 应用 (1)

[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框架构建一个示例应用的开发过程,使得网络技术和移动开发碰撞出绚丽火花,本文系 OneAPM 工程师编译整理: 我们已经了解像 Titanium 和 PhoneGap 等框架,它们能让开发者用 Web 技术构建移动应用.这是一个优势,支持开发者使用原先网络和移动开发的相关技术.不仅如此,相同的代码库经过

HBuilder开发App教程03-定制图标,启动页以及打包

helloworld 上次说到了helloworld.你应该已经能够新建项目.真机调试了, 这次来说说图标的定制,启动页的定制以及打包. 图标定制 假设不定制图标的话,默认会是博文顶部图表的样子, 你肯定不想这个样子,来吧.定制一个自己的图标吧. 打开项目下的manifest.json,选择底部的图标配置(老版本号需升级到最新版). 然后选择一个制作好的256*256大小的png,系统会自己主动生成各种大小的图标. 启动页定制 步骤和上面一样,至不要要选择启动图片配置一项. 然后依照各种图片大小

React native 之设置IOS的图标,名称和启动图(下篇文章会讲到RN的android的相关设置)

1.首先,app的名称: 如图所示:我的工程名叫BOOk 在BOOk下面的info.plist的文件里设置app的相关信息:比如Bundle name就是设置APP的名称 2.App的图标:(这里注意的是:1.app的图标有尺寸之分,所以如果图片的尺寸不对,编译也就会失败!2.图标的圆角是系统自己设定的,也就是说,我们上传的图片是正正方方的!) 如图:在工程文件下面的 images.xcassests的文件下是存储图片文件的地方,在IOS开发中一般是将图片放在这个位置,但是在React nati