中国领先的IT技术网站
51CTO旗下网站
React Native 环境搭建和创建项目(Mac)
React Native的出现，为APP开发者们带来了冲动和激情，令Native开发者和Web开发者都为之痴迷。
作者：朱源浩来源：| 13:22
&(一) 搭建基本环境(必要)
使用React Native开发iOS应用需要OSX系统，Xcode，Homebrew，node，npm，也可以有选择的使用watchman
1. 安装Homebrew
Homebrew, 简称brew, Mac系统的包管理器, 用于安装NodeJS和一些其他必需的工具软件。
Home-brew 的使用方式:
1)搜索软件：brew search 软件名，如brew search wget
2)安装软件：brew install 软件名，如brew install wget
3)卸载软件：brew remove 软件名，如brew remove wget
打开终端，运行以下语句(中间需要输入密码)进行安装：
/usr/bin/ruby&-e&&$(curl&-fsSL&/Homebrew/install/master/install)&&
运行效果如下：
&Homebrew安装.png
可通过如下语句查看安装是否成功以及安装的Homebrew版本：
正常情况下均可安装成功，若出现网络问题安装失败，则运行如下语句清理后再重新安装：
ruby&-e&&$(curl&-fsSL&/Homebrew/install/master/uninstall)&&&ruby&-e&&$(curl&-fsSL&/Homebrew/install/master/install)&&
2. 使用Homebrew来安装Node.js
React Native需要NodeJS 4.0或更高版本。本文发布时Homebrew默认安装的是6.x版本，完全满足要求。
终端运行语句如下：
brew&install&node&
运行效果如下：
&安装Node.js.png
3. 安装React Native的命令行工具(react-native-cli)
React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
终端运行语句如下：
npm&install&-g&react-native-cli&
运行效果如下：
安装react-native-cli.png
若出现错误(可能由于权限不足)，则实用以下语句进行安装：
sudo&npm&install&-g&react-native-cli&
补充：(由于国内网络问题，可以将npm仓库替换为国内镜像)
//将npm仓库替换为国内镜像：&&npm&config&set&registry&https://registry.npm.taobao.org&&&npm&config&set&disturl&https://npm.taobao.org/dist&&
iOS 开发这个最基础的，应该一般有安装，，没有的话只推荐在App Store直接搜索安装。
(二) 推荐安装的工具
1. Watchman
Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。
终端运行语句安装：
brew&install&watchman&
运行效果如下：
安装 Watchman.png
Flow是一个静态的JS类型检查工具，可方便找出代码中可能存在的类型错误。
译注：你在很多示例中看到的奇奇怪怪的冒号问号，以及方法参数中像类型一样的写法，都是属于这个flow工具的语法。这一语法并不属于ES标准，只是Facebook自家的代码规范。
终端运行语句安装：
brew&install&flow&
运行效果如下：
安装Flow.png
3. React Native开发之IDE
可以直接用自己喜欢的编辑器进行编辑。
React Native官方推荐了三种IDE编写React Native应用:
1)Atom和Nuclide
2)WebStorm
3)Sublime Text
4) VSCode+React Native Tools
更近一步的了解和使用参考我一起写的另一篇文章哈哈：
React Native 开发之IDE
(三) 创建第一个项目
1. 初始化创建项目
命令行创建项目：
react-native&init&AwesomeProject&
运行截图如下：
react-native init AwesomeProject.png
这里可能会是个漫长的等待过程，可能由于项目依赖包本身就很庞大，让后下载速度比较慢。总之我半夜做的尝试，为了写文章截图哈哈，安心去看了一集异世界的动漫，然后回来就发现创建项目成功了哈。。(ps：之前在另一部电脑就试过创建项目活着集成原生的时候执行这个命令，不过等得不耐烦就又ca掉它了，，可能真的需要耐心哈哈)
创建成功则如下：
创建成功截图.png
生成项目文件集.png
2. 运行项目
命令行运行项目
//&视情况而定，总之进入项目根目录&&cd&AwesomeProject&&//&运行iOS项目&&react-native&run-ios&
接下来就是一连串反应，截图如下，成功运行项目：
弹出运行服务窗口.png
虚拟机运行成功截图.png
若是调试安卓版本：(需要安装好安卓SDK、配置环境等)
//&运行安卓项目&&react-native&run-android&
3. 除了命令行运行，也可直接像iOS原生那样运行
方法一：Nuclide中打开AwesomeProject文件夹，然后运行
方法二：双击ios/AwesomeProject.xcodeproj文件然后在Xcode中点击Run按钮。(最常用，对iOS开发者)
4. 简单的修改调试
使用你喜欢的编辑器打开index.ios.js并随便改上几行。
在iOS Emulator中按下⌘-R就可以刷新APP并看到你的最新修改！
【编辑推荐】
【责任编辑： TEL：（010）】
大家都在看猜你喜欢
头条外电头条原创原创
24H热文一周话题本月最赞
讲师：1人学习过
讲师：1人学习过
讲师：5人学习过
精选博文论坛热帖下载排行
本书依据最新版《网络工程师考试大纲》的考核要求，深入研究了历年网络工程师考试试题的命题风格和试题结构，对考查的知识点进行了提炼，并...
订阅51CTO邮刊React Native-调试篇 - 知乎专栏
{"debug":false,"apiRoot":"","paySDK":"/api/js","wechatConfigAPI":"/api/wechat/jssdkconfig","name":"production","instance":"column","tokens":{"X-XSRF-TOKEN":null,"X-UDID":null,"Authorization":"oauth c3cef7c66aa9e6a1e3160e20"}}
{"database":{"Post":{"":{"title":"React Native-调试篇","author":"fyales","content":"理想的App开发流程是这样的:产品经理提出明确的需求，UI给出完美的设计图,API那边的接口已经完成，App开发一遍完成，测试部门一遍就过，没有任何错误。但是产品经理总是在改需求，UI那边也时不时改设计图，API那边经常不稳定,你自己写的代码也经常错误百出。所以，对于写App的我们来说，我们需要调试自己的代码。事实上，调试代码，修复Bug会占用你大量的时间，因此调试对每一个App开发者都是非常重要的一件事。今天我们就来讲一讲React Native的调试。打开App内的开发菜单在iOS中晃动设备或者在模拟器上按下control + ? + z在Android中晃动设备。比如，在 中你可以通过按下? + m来模拟点击硬件菜单）。PC键盘上也有这个键，一般在标准键盘右边的Ctrl和右Windows键之间，即模拟鼠标右键的键。App内置的调试菜单一般的调试选项都在菜单里,具体的作用也可以从菜单项的名称看出一二。这里值得一提的是Hot Reloading和Live Reload的区别。这两项菜单的功能都是你只要保存一下原文件，那么App就会实时刷新。Live Reload是全局刷新，而Hot Reloading是局部刷新。热刷新这样做有什么好处呢？举个例子，如果你现在调试的页面是个很深的页面，从打开app之后要点击好几次才能进到你想要调试的页面。这样就会浪费很多时间(虽然比重新编译程序，再让App跑起来要快很多)。这时候使用热刷新就会节省很多时间(Android Studio2以后的Instant Run也有类似功能)。Chrome开发工具在开始你的调试之旅之前，你最好下载一个Chrome插件React Developer Tools，这样会更方便你的调试。需要在开发菜单中选择Debug JS Remotely，这会打开一个新的tab页。在Chrome中，按下? + option + i或者选择视图(View) -& 开发者(Developer) -& 开发工具(Developer Tools)来打开开发工具控制台。打开选项，能够获得更好的开发体验。打开的Debugger在这里需要提一下的是Chrome中并不能直接看到App的用户界面，而只能提供console的输出，以及在sources项中断点调试js脚本。因此，我们在开发控制台一般就做上面两件事输出日志。利用console，对于Android开发者，console可能比较陌生；对于js开发者来讲，这是他们调试代码最基本的工具。其实它的作用就是Android中所用的Log类。Console的用法十分简单，像这样
console.log('The info is ' + info);\n打断点。请在debuggerWorker.js目录下找到需要打断点的文件，别问我怎么知道的。宝宝我会告诉你我找打断点的地方找了一天么。之后你所要做的事情就是像一般调试流程一样进行调试就行了。关闭开发者选项当你的App写完正式发布之后,你就需要关闭开发者选项了，你可以通过以下的操作关闭开发者选项:对于iOS来说，在Xcode中打开你的项目，选择Product → Scheme → Edit Scheme...(或者按下? + &)。接着选择菜单上左边的Run，然后将构建设置(Build Configuration)更改为Release.在Android中，默认情况下gradle的release版本（比如使用gradle的assembleRelease任务来构建）就会关闭开发者菜单。你也可以通过给ReactInstanceManager#setUseDeveloperSupport传递需要的参数来定制这一行为。其他React Native除了可以利用chrome进行调试，也可以用Atom的插件Nuclide进行调试，感兴趣的可以访问其，功能比Chrome DevTools强大很多，估计很快就会取代后者。参考","updated":"T03:38:31.000Z","canComment":false,"commentPermission":"anyone","commentCount":1,"collapsedCount":0,"likeCount":1,"state":"published","isLiked":false,"slug":"","isTitleImageFullScreen":false,"rating":"none","titleImage":"","links":{"comments":"/api/posts//comments"},"reviewers":[],"topics":[{"url":"/topic/","id":"","name":"React Native"},{"url":"/topic/","id":"","name":"React"},{"url":"/topic/","id":"","name":"Android"}],"adminClosedComment":false,"titleImageSize":{"width":0,"height":0},"href":"/api/posts/","excerptTitle":"","column":{"slug":"fyales","name":"扯谈的地方"},"tipjarState":"inactivated","annotationAction":[],"sourceUrl":"","pageCommentsCount":1,"snapshotUrl":"","publishedTime":"T11:38:31+08:00","url":"/p/","lastestLikers":[{"profileUrl":"/people/jing-shen-bing-yuan-de-xing-zi","bio":"我愿能朝着太阳生长，做个温暖的人，不卑不吭，清澈生活。。。。","hash":"8c1e8bb196cde41e504d9","uid":04,"isOrg":false,"description":"","isOrgWhiteList":false,"slug":"jing-shen-bing-yuan-de-xing-zi","avatar":{"id":"2dc183a7be4b3cee3b09a603ec02125b","template":"/{id}_{size}.jpg"},"name":"精神病院的杏子"}],"summary":"理想的App开发流程是这样的:产品经理提出明确的需求，UI给出完美的设计图,API那边的接口已经完成，App开发一遍完成，测试部门一遍就过，没有任何错误。但是产品经理总是在改需求，UI那边也时不时改设计图，API那边经常不稳定,你自己写的代码也经常错误百出…","reviewingCommentsCount":0,"meta":{"previous":{"isTitleImageFullScreen":false,"rating":"none","titleImage":"","links":{"comments":"/api/posts//comments"},"topics":[{"url":"/topic/","id":"","name":"Android"},{"url":"/topic/","id":"","name":"React Native"}],"adminClosedComment":false,"href":"/api/posts/","excerptTitle":"","author":{"profileUrl":"/people/fyales","bio":"谦谦君子，温润如玉","hash":"7f9ebfc0580","uid":60,"isOrg":false,"description":"了解世界的真相","isOrgWhiteList":false,"slug":"fyales","avatar":{"id":"v2-0bb73c4adf35b5c9433e","template":"/{id}_{size}.jpg"},"name":"鲫鱼豆腐汤"},"column":{"slug":"fyales","name":"扯谈的地方"},"content":"前面三篇文章我们分别介绍了，和，今天我们介绍任何软件，系统都很重要的导航部分。Navigator对于Android开发人员来讲(IOS猿请忽略)，Android页面之间的跳转是由工作栈维护的，进入一个页面，一般的是入栈，而退出一个页面，就意味着出栈。我们在开发app的时候，之所以没有感觉到出栈入栈，是因为Android将这些都封装好了。React Native则比较粗暴，你从它页面的跳转方法就可以明显的看出，它是由栈实现的,归结到组件的话就是Navigator组件(IOS有NavigatorIOS组件，相较于Navigator,效率更高)。下面来看一个简单的例子:import FirstPageComponent from './FirstPageComponent';
\n\nclass demoReact extends Component {\n
render() {\n
let defaultName = 'FirstPageComponent';\n
let defaultComponent = FirstPageComponent;\n
let defaultTitle = \"First Page\";\n\n
return (\n
&Navigator\n
initialRoute={{\n
name: defaultName,\n
component: defaultComponent,\n
title: defaultTitle,\n
configureScene={(route) =& {\n
return Navigator.SceneConfigs.VerticalDownSwipeJump;\n
renderScene={(route, navigator) =& {\n
let Component = route.component;\n
return &Component {...route.params} navigator={navigator} /&\n
}\n\n};\n其中:initialRoute：定义了启动加载时的路由，上面的示例定义了组件名称，组件和页面的标题。configureScene:定义了页面切换时的过渡动画，可选的值有:Navigator.SceneConfigs.PushFromRight (默认)Navigator.SceneConfigs.FloatFromRightNavigator.SceneConfigs.FloatFromLeftNavigator.SceneConfigs.FloatFromBottomNavigator.SceneConfigs.FloatFromBottomAndroidNavigator.SceneConfigs.FadeAndroidNavigator.SceneConfigs.HorizontalSwipeJumpNavigator.SceneConfigs.HorizontalSwipeJumpFromRightNavigator.SceneConfigs.VerticalUpSwipeJumpNavigator.SceneConfigs.VerticalDownSwipeJumprenderScene:此方法时必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。FirstPageComponent.js的代码如下:import React from 'react';\n\nimport {\n
Navigator,\n
TouchableOpacity,\n
StyleSheet\n} from 'react-native';\n\nimport SecondPageComponent from './SecondPageComponent';\n\nexport default class FirstPageComponent extends React.Component {\n
constructor(props) {\n
super(props);\n
this.state = {\n
user:null,\n
componentDidMount() {\n
_pressButton() {\n
const { navigator } = this.props;\n
if(navigator) {\n
navigator.push({\n
name: 'SecondPageComponent',\n
component: SecondPageComponent,\n
title:'Second Page',\n
params:{\n
id:this.state.id,\n
getUser: (user) =& {\n
this.setState({\n
user: user\n
render() {\n
if(this.state.user) {\n
&View style={styles.container}&\n
&Text&用户信息: { JSON.stringify(this.state.user) }&/Text&\n
&View style={styles.container}&\n
&TouchableOpacity onPress={this._pressButton.bind(this)} style={styles.userLayout}&\n
&Text &查询ID为{ this.state.id }的用户信息&/Text&\n
&/TouchableOpacity&\n
}\n}\n\nvar styles = StyleSheet.create({\n
container: {\n
justifyContent: 'center',\n
alignItems: 'center',\n
backgroundColor: '#F5FCFF',\n
marginTop:100,\n
userLayout:{\n
borderWidth:1,\n
borderColor:'black',\n
padding:10,\n
}\n});\nSecondPageComponent.js的代码import React from 'react';import {\n
Navigator,\n
TouchableOpacity,\n
StyleSheet\n} from 'react-native';\n\nimport FirstPageComponent from './FirstPageComponent';\n\nconst USER_MODELS = {\n
1: { name: 'fyales一号', age: 23 },\n
2: { name: 'fyales二号', age: 25 }\n};\n\nexport default class SecondPageComponent extends React.Component {\n\n
constructor(props) {\n
super(props);\n
this.state = {\n
id:null,\n
title:\"Second Page\",\n
componentDidMount(){\n
this.setState({\n
id:this.props.id,\n
title:this.props.title,\n
_pressButton() {\n
const { navigator } = this.props;\n\n
if(this.props.getUser) {\n
let user = USER_MODELS[this.props.id];\n
this.props.getUser(user);\n
if(navigator) {\n
navigator.pop();\n
render() {\n
return (\n
&View style = {styles.container}&\n
&Text&获得的参数: id={ this.state.id }&/Text&\n
&TouchableOpacity onPress={this._pressButton.bind(this)} style={styles.backLayout}&\n
&Text&返回&/Text&\n
&/TouchableOpacity&\n
}\n}\n\nvar styles = StyleSheet.create({\n
container: {\n
justifyContent: 'center',\n
alignItems: 'center',\n
backgroundColor: '#F5FCFF',\n
marginTop:100,\n
backLayout:{\n
borderWidth:1,\n
borderColor:'black',\n
padding:10,\n
}\n});\n我们可以先看看FirstPageComponent.js的跳转逻辑，navigator.push()方法就是将SecondPage入栈，同样的，我们通过定义组件名称，组件来找到相应的文件，并将下一个页面需要展示的title传到下一个页面。而且，我们通过params参数传了一些数据和一个回调函数给下一个页面。这里需要注意的是，states存储的一般的是当前页面的值，而props存储的一般是其他页面传给本页面的值。在我们从FirstPage跳到SecondPage之后，再点击返回按钮的时候，_pressButton方法首先执行了第一个页面的回调方法，从而刷新了第一个页面的状态，同时第二个页面出栈，返回到了第一个页面。除了最基本的push方法和pop方法,navigator还有许多其他方法进行导航:getCurrentRoutes():获取当前栈里的路由，也就是push进来，没有pop掉的那些。jumpBack():跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。jumpForward():上一个方法不是调到之前的路由了么，用这个跳回来就好了。jumpTo(route): 跳转到已有的场景并且不卸载。push(route) :跳转到新的场景，并且将场景入栈，你可以稍后跳转过去pop():跳转回去并且卸载掉当前场景replace(route):用一个新的路由替换掉当前场景replaceAtIndex(route, index):替换掉指定序列的路由场景replacePrevious(route): 替换掉之前的场景resetTo(route):跳转到新的场景，并且重置整个路由栈immediatelyResetRouteStack(routeStack):用新的路由数组来重置路由栈popToRoute(route):pop到路由指定的场景，在整个路由栈中，处于指定场景之后的场景将会被卸载。popToTop():pop到栈中的第一个场景，卸载掉所有的其他场景。navigationBar(导航栏)同样的，为了实现类似Android导航栏的功能，React Native提供了NavigationBar(类似于Android的Toolbar，不过个人觉得不太好用，建议用第三方库)，加了NavigationBar的index.android.js代码如下:import React, {\n
Component,\n} from 'react';\n\nimport {\n
AppRegistry,\n
StyleSheet,\n
Navigator,\n
TouchableOpacity\n} from 'react-native';\n\nimport FirstPageComponent from './FirstPageComponent';\n\n
class demoReact extends Component {\n\n
render() {\n
let defaultName = 'FirstPageComponent';\n
let defaultComponent = FirstPageComponent;\n
let defaultTitle = \"First Page\";\n\n
return (\n
&Navigator\n
initialRoute={{\n
name: defaultName,\n
component: defaultComponent,\n
title: defaultTitle,\n
configureScene={(route) =& {\n
return Navigator.SceneConfigs.FadeAndroid;\n
renderScene={(route, navigator) =& {\n
let Component = route.component;\n
return &Component {...route.params} navigator={navigator} /&\n
navigationBar={\n
&Navigator.NavigationBar\n
routeMapper={NavigationBarRouteMapper}\n
style={styles.navBar}\n
};\n\nvar NavigationBarRouteMapper = {\n\n
LeftButton: function(route, navigator, index, navState) {\n
if (index === 0) {\n
return null;\n
return (\n
&View style={styles.navBarLeftButton}&\n
&TouchableOpacity\n
onPress={() =& navigator.pop()}\n
&Text style={styles.navBarText}&\n
&/TouchableOpacity&\n
RightButton: function(route, navigator, index, navState) {\n
return (\n
&View style={styles.navBarRightButton}&\n
&TouchableOpacity\n
&Text style={styles.navBarText}&\n
&/TouchableOpacity&\n
Title: function(route, navigator, index, navState) {\n
return (\n
&View style={styles.navbarTitle}&\n
&Text style={styles.navBarTitleText}&\n
{route.title}\n
},\n\n};\n\nvar styles = StyleSheet.create({\n
navBar: {\n
flexDirection: 'row',
//只支持column和row两种属性\n
flexWrap:'nowrap',
//只支持wrap和nowrap两种属性\n
justifyContent:'center',
alignItems:'stretch',
//交叉轴\n
backgroundColor: 'orange',\n
navBarText: {\n
fontSize: 16,\n
color:'white',\n
textAlign:'center',\n
navbarTitle:{\n
alignSelf:'center',\n
paddingTop:15,\n
navBarTitleText: {\n
color: 'white',\n
fontSize:18,\n
textAlign:'left',\n
navBarLeftButton: {\n
paddingLeft: 10,\n
paddingTop:18,\n
alignSelf:'flex-start',\n
navBarRightButton: {\n
paddingRight: 10,\n
paddingTop:18,\n
alignSelf:'flex-end',\n
},\n\n});\n\nAppRegistry.registerComponent('demoReact', () =& demoReact);\n代码中的NavigationBarRouteMapper是导航栏路由映射器, 设置左边按钮，右边按钮和标题。完整的效果图如下:第一次进入页面进入第二页点击按钮返回第三方实现是一款第三方导航组件。你可以通过它进行合理的视图组织。参考","state":"published","sourceUrl":"","pageCommentsCount":0,"canComment":false,"snapshotUrl":"","slug":,"publishedTime":"T19:06:52+08:00","url":"/p/","title":"React Native--导航","summary":"前面三篇文章我们分别介绍了，和，今天我们介绍任何软件，系统都很重要的导航部分。Navigator对于Android开发人员来讲(IOS猿请忽略)，Android页面之间的跳转是由工作栈维护的，进入一个页面，一般的是入栈，而退出一个页面，就…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"commentPermission":"anyone","commentsCount":0,"likesCount":0},"next":{"isTitleImageFullScreen":false,"rating":"none","titleImage":"","links":{"comments":"/api/posts//comments"},"topics":[{"url":"/topic/","id":"","name":"有趣"},{"url":"/topic/","id":"","name":"应用程序 (Application Programme)"}],"adminClosedComment":false,"href":"/api/posts/","excerptTitle":"","author":{"profileUrl":"/people/fyales","bio":"谦谦君子，温润如玉","hash":"7f9ebfc0580","uid":60,"isOrg":false,"description":"了解世界的真相","isOrgWhiteList":false,"slug":"fyales","avatar":{"id":"v2-0bb73c4adf35b5c9433e","template":"/{id}_{size}.jpg"},"name":"鲫鱼豆腐汤"},"column":{"slug":"fyales","name":"扯谈的地方"},"content":"在很多非互联网从业人员来说，写一个App是件比较奇怪的事情。虽然很多人经常使用各种类型的App，用它们购物，聊天，玩游戏，但他们从来不知道(或者说根本不知道)App是怎么来的。而对于写App的我们来说，开发一个App是我们生活重要的组成部分。我每天可能只花两个小时来吃饭，但我一般一天要花费八个小时的时间来做有关App的事情。可能唯一让我们头疼的事是如果向其他人(特别是我们的长辈)解释我们的工作。我一般都这样说:叔叔(阿姨，爷爷...)你用过淘宝么?（你用过QQ么？你用过微信么？）对对对，我们就是做类似这个的。\nApp的生命周期其实和一个人的人生历程非常类似，它们都要经过出生(幼年)-&成长(少年)-&繁荣(青年)-&衰落(中年)-&死亡(老年)的周期，当然也不排除跳出其中一两个步骤的情况(人意外死亡，App退出不受欢迎直接砍掉)。出生一个App的产生可以追溯到产品经理的一个想法。当然，这个想法是会为公司带来利益的想法。产品经理负责将这个想法固化,然后程序员负责将这个想法做出来。所以说，产品经理是App的父亲，而程序员是App的母亲(吼，我们是伟大的母亲!)。在这里必须要提一下App团队里面的重要角色UED团队。UED同样参与App的产品设计，用户体验设计，界面界面设计。简而言之，App长啥样一般是他说了算。他的角色相当于一个人的外貌。在这个看脸的时代，一个好的脸蛋可以使你的人生开了挂一样。因此，我觉得App性别一般是女生。一个App做出来，就要推向市场，接受市场的考验了。但是还不到时候，为什么呢，它还太小，免疫系统不过完善。这时我们的测试部门就发挥作用了。测试部门发现程序中的错误(bug),而后通知程序员修复这些错误。在这里，程序员和测试部门一起组成了App的免疫系统。当一切准备就绪，App推向市场，那么App宝宝在这个时候就正式诞生了。妈妈怀胎十月生下小宝宝，有时候App从构建到第一个版本还不止十个月呢。成长 =& 繁荣App推向市场了，你以为就没事干了么？错，这个时候一个App的旅程才正式开始。一个新生的App遇到的第一个问题就是推广问题，怎么能够让更多的人使用她。这时候会市场部就会登场了。市场部的最大作用就是推广App，使更多的人能够使用这款App。人类的那种行为可以描述这一现象。答案显而易见:化妆。没有丑女人，只有懒女人。同样的，一个App就算界面再丑，只要市场营销做的好，仍然有很多人用。现在人类获取知识一般是通过阅读，模仿，学习，在一个人不断成长的过程中，他会学会各种生活常识，专业知识，控制自己的心绪变化等等。那么一个App如何成长或以什么因素来判断App的成长？我的答案是功能，体验的完善，用户数的稳定增加。这第一要靠产品经理自己的想法，向其他App学习，模仿，为App添加新的功能，砍去一些功能。第二，就要靠运营部门的努力。这些都要靠另外一个部门的帮助，这个部门是BI(数据分析)。 BI部门可以通过程序员在App里面植入的代码对用户行为进行统计，并产生图标供产品,运营分析，从而可以对App进行完善。衰落 =& 死亡当一个App用户量持续下滑;或者公司对这款App不重视，将大量的资源抽出去支持其他事情；或者公司决定放弃此款App的时候，那么它就开始衰落，乃至死亡。人生一方面，我们可以说App的生命周期和人的一生相似。反过来说，亦是如此。人的一生从无忧无虑的儿童，到年富力强的青年，最后变成行将就木的老年人，何尝不是一个升级打怪的过程。我们会不断的完善自己(类似App的升级):知识的增长，财富的增加，阅历的提升，心理的强大，同时我们也会走很多弯路,犯很多的错误(类似Bug,添加错误的功能等)，乃至致命的错误(类似程序崩溃，用户大量流失)。但是只要你在一生中能够做到好好享受生活，甚至能够带给其他人欢乐(很多App提升了人们的生活质量)。我认为这就足够了。其他类比，推论富二代对，你没有看错。App中也有富二代，在这里一般指的是大公司推出的App。大公司很有钱，技术实力也很强劲，能够给出大量的资源给App，一般这种App长得美，妆容好，但也有富二代的坏习惯，目中无人(BAT里面的BA流氓也不是一天两天了)。用户遇到的Bug将Bug比喻成人生中遇到的困难也不赖。每一次对Bug的修复，对于App来说也是一种成长。裙带关系还是首推百度，百度全家桶，坑你没商量。最后如果你的人生是App,那么你已经到什么版本了呢？你需要为自己加上什么功能(日语，摄影)，完善什么功能(理财)，放弃什么呢？如果各位有其他有意思的比喻，欢迎留言，不喜请喷。See You Next Time。","state":"published","sourceUrl":"","pageCommentsCount":0,"canComment":false,"snapshotUrl":"","slug":,"publishedTime":"T17:33:50+08:00","url":"/p/","title":"为什么说人生就像App","summary":"在很多非互联网从业人员来说，写一个App是件比较奇怪的事情。虽然很多人经常使用各种类型的App，用它们购物，聊天，玩游戏，但他们从来不知道(或者说根本不知道)App是怎么来的。而对于写App的我们来说，开发一个App是我们生活重要的组成部分。我每天可能只…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"commentPermission":"anyone","commentsCount":0,"likesCount":0}},"annotationDetail":null,"commentsCount":1,"likesCount":1,"FULLINFO":true}},"User":{"fyales":{"isFollowed":false,"name":"鲫鱼豆腐汤","headline":"了解世界的真相","avatarUrl":"/v2-0bb73c4adf35b5c9433e_s.jpg","isFollowing":false,"type":"people","slug":"fyales","bio":"谦谦君子，温润如玉","hash":"7f9ebfc0580","uid":60,"isOrg":false,"description":"了解世界的真相","profileUrl":"/people/fyales","avatar":{"id":"v2-0bb73c4adf35b5c9433e","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false,"badge":{"identity":null,"bestAnswerer":null}}},"Comment":{},"favlists":{}},"me":{},"global":{},"columns":{"fyales":{"following":false,"canManage":false,"href":"/api/columns/fyales","name":"扯谈的地方","creator":{"slug":"fyales"},"url":"/fyales","slug":"fyales","avatar":{"id":"fcecadfb4ea","template":"/{id}_{size}.jpeg"}}},"columnPosts":{},"postComments":{},"postReviewComments":{"comments":[],"newComments":[],"hasMore":true},"favlistsByUser":{},"favlistRelations":{},"promotions":{},"switches":{"couldAddVideo":false},"draft":{"titleImage":"","titleImageSize":{},"titleImageFullScreen":false,"canTitleImageFullScreen":false,"title":"","titleImageUploading":false,"error":"","content":"","draftLoading":false,"globalLoading":false,"pendingVideo":{"resource":null,"error":null}},"config":{"userNotBindPhoneTipString":{}},"recommendPosts":{"articleRecommendations":[],"columnRecommendations":[]},"env":{"isAppView":false,"appViewConfig":{"content_padding_top":128,"content_padding_bottom":56,"content_padding_left":16,"content_padding_right":16,"title_font_size":22,"body_font_size":16,"is_dark_theme":false,"can_auto_load_image":true,"app_info":"OS=iOS"},"isApp":false},"sys":{}}