创业公司开发APP用原生还是RN、weex或flutter

近半年，自己创业做在线教育，近期也打算开发自己的APP，作为一个技术出身的创业者，所以可以在开发APP时自己做技术选型。但想到还有很多创业者或架构师也面临类似的问题，所以把自己的思考分享给需要的人。我的客户端经验笔者2011年毕业于北京交大，2015年下半年开始由操作系统开发转向安卓开发，2016年在搜狐开始使用react-native开发APP。 2017年曾短期在便利蜂参与过三个RN项目的开发，然后去易鑫从事大前端团队的管理，团队开发维护的原生APP，通过搭桥嵌入H5。 2019年初在快陪练负责前端团队，以纯flutter的方式上线了一个iOS版的钢琴资讯APP，且在直播上课APP中的订单模块接入了flutter。过去半年多，使用uni-app开发了多个跨端小程序，其中uni-app集成了weex跨端APP开发框架，可以一套代码生成h5，各种小程序以及安卓和iOS的原生APP。不管是原生APP、还是近几年比较热门的RN、weex或flutter跨端开发APP的技术，笔者都在真实项目中使用过。正因为都用过，所以各自的坑有都进去过，虽然因为学的东西多，导致精力分散，很多技术都是略懂，但是总结一下，相信还是能有一定参考价值的。移动应用开发的趋势由于对移动应用的大量需求，很多公司已经把他们应用开发的重心转移到移动应用上了，这是一个不断有更好的技术、平台和框架流入的领域。移动行业渴望进行一场革命，以遏制移动应用程序开发过程中出现的成本高、耗时长等问题。因此，该变革以跨平台开发的形式出现。现在，维护代码和开发应用程序对于开发人员来说变得简单且省时。现在，跨平台应用开发正在创业公司中变得越来越流行，相继出现了多种跨端开发原生APP的技术方案。除了weex只在阿里系的公司用得多外，react native 和 flutter目前都有大量的公司在使用，并且互相竞争，试图证明自己是跨平台移动应用的最合适的王者。 React native 是 Facebook 2015年开源的，并且很快获得了大众的欢迎。而Google 的 flutter 则是这两年才火起来的新技术，它优势是更好的性能。不仅对于资金紧张的初创公司，即使是大公司的新项目，初期都需要快速验证产品的可行性，因此多数公司都不会选择原生开发，而是基于跨端技术。那么对于开发者来说，应该选用哪个跨平台应用程序开发框架比较好呢？由于采用react native 和 flutter 的技术栈项目最多，所以本文主要分享我作为创业者在做客户端技术选型时，最后采纳的是使用RN还是flutter的过程。 react native vs flutter 环境搭建从当前两个框架的最新版本来看，搭建原生开发环境都是比较复杂的，相对来讲，flutter要容易一些，特别是搭建Android开发环境。编程语言 React Native 允许你使用 Javascript 开发应用程序，通过简单配置也可以使用微软维护的Typescript 语言进行开发，克服JS作为动态语言的一些不足。由谷歌开发的 Flutter 提出了一种名为 Dart 的新编程语言。它对于开发人员来说是新手，但是那些具有 OOP 语言经验的人，比如 C ++ 和 JAVA，可以很容易地学习的。 IDE 和易于编码如果我们讨论 React Native 的 IDE，那么它几乎支持所有领先的 IDE。然而，Flutter 受 Android studio / IntelliJ 和 visual studio 代码支持。代码结构 Google 的 Dart 没有模板、样式和数据文件的分离，因此代码变得有点难以理解。而 Javascript 遵循简单的代码结构，因此开发人员更清楚地理解和编写代码。性能因为 React Native 通过 JS 桥接原生控件，所以再渲染上肯定不如有一套自己的渲染机制flutter，但肉眼所看的性能体验基本没区别。总而言之，除了React Native 列表性能比较差外，两个平台的性能都有些接近。稳定性这两个平台都得到了领先技术社区的支持，因此对稳定性毫无疑问，两者都有很好的稳定性。我们的决定客观讲，flutter是google的亲儿子，如果目标用户是安卓居多的话，使用flutter 都比使用Android原生开发要好，因为官方IDE都在大力推进安卓开发人员使用flutter。而react-native 虽然不是Google官方提供的，但由于其中立性，所以对两个平台的支持都差不多，且由于一开始只有iOS版本，所以iOS的开发上更友好。由于我们公司未来长远的业务是少儿编程，而此核心系统就是基于react开发的，为了复用我们的前端人力，选择react-native 更合适。并且由于react-native支持热更新，这样就避免了用户需要频繁下载安装APP的最新版本了。虽然flutter也可以实现安卓端的热更新，但是不稳定且不是官方支持的。同时，笔者手上有大量的react-native项目可以参考，所以使用react-native开发我们的APP是最好的选择，未来如果性能不满足要求了，再考虑使用flutter。作者：易编课堂链接：https://www.jianshu.com/p/7fb688118bfa 来源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

react-navigation示例

App.js

import React, { Component } from 'react'

import { Platform, StyleSheet, Text, View } from 'react-native'

import { createStackNavigator, createAppContainer } from 'react-navigation'

import HomeScreen from './pages/HomeScreen'

import ProfileScreen from './pages/ProfileScreen.js'

const navigator = createStackNavigator({

Home: { screen: HomeScreen },

Profile: { screen: ProfileScreen }

})

const App = createAppContainer(navigator)

export default App

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF'

welcome: {

fontSize: 20,

textAlign: 'center',

margin: 10

instructions: {

textAlign: 'center',

color: '#333333',

marginBottom: 5

}

})

pages/ProfileScreen

import React, { Component } from 'react'

import { Text, StyleSheet, View } from 'react-native'

export default class ProfileScreen extends Component {

static navigationOptions = {

title: 'ProfileScreen'

}

render() {

return (

<View>

</View>

)

}

const styles = StyleSheet.create({})

pages/HomeScreen

import React, { Component } from 'react'

import { Text, StyleSheet, View, Button } from 'react-native'

import { createStackNavigator, createAppContainer } from 'react-navigation';

export default class HomeScreen extends Component {

static navigationOptions = {

title: 'HomeScreen'

}

render() {

return (

<View>

<Button title="go to two" onPress={() => this.props.navigation.navigate('Profile')} />

</View>

)

}

const styles = StyleSheet.create({})

然后报错： undefined is not an object (evaluating ‘RNGestureHandlerModule.State’ 解决办法： npm install npm install --save react-navigation npm install --save react-native-gesture-handler react-native link 参考： https://www.cnblogs.com/wuvkcyan/p/10011012.html https://blog.csdn.net/quhongqiang/article/details/86597694

处理文本输入

TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。假如我们要实现当用户输入时，实时将其以单词为单位翻译为另一种文字。我们假设这另一种文字来自某个吃货星球，只有一个单词： 🍕。所以"Hello there Bob"将会被翻译为"🍕🍕🍕"。

import React, { Component } from 'react';

import { AppRegistry, Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {

constructor(props) {

super(props);

this.state = {text: ''};

}

render() {

return (

<TextInput

style={{height: 40}}

placeholder="Type here to translate!"

onChangeText={(text) => this.setState({text})}

{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}

</Text>

</View>

);

}

在上面的例子里，我们把text保存到 state 中，因为它会随着时间变化。文本输入方面还有很多其他的东西要处理。比如你可能想要在用户输入的时候进行验证，在React 中的受限组件一节中有一些详细的示例（注意 react 中的 onChange 对应的是 rn 中的 onChangeText）。此外你还需要看看TextInput 的文档。 TextInput 可能是天然具有“动态状态”的最简单的组件了。下面我们来看看另一类输入组件，先从如何处理触摸开始学习。 from:https://reactnative.cn/docs/handling-text-input/

使用Flexbox布局

我们在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。译注：这里有一份简易布局图解，可以给你一个大概的印象。 React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。 Flex Direction 在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

import React, { Component } from 'react';

import { AppRegistry, View } from 'react-native';

export default class FlexDirectionBasics extends Component {

render() {

return (

// 尝试把`flexDirection`改为`column`看看

</View>

);

}

};

Justify Content 在组件的 style 中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around、space-between以及space-evenly。

import React, { Component } from 'react';

import { AppRegistry, View } from 'react-native';

export default class JustifyContentBasics extends Component {

render() {

return (

// 尝试把`justifyContent`改为`center`看看

// 尝试把`flexDirection`改为`row`看看

<View style={{

flex: 1,

flexDirection: 'column',

justifyContent: 'space-between',

}}>

</View>

);

}

};

Align Items 在组件的 style 中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。以下面的代码为例：只有将子元素样式中的width: 50去掉之后，alignItems: 'stretch’才能生效。

import React, { Component } from 'react';

import { AppRegistry, View } from 'react-native';

export default class AlignItemsBasics extends Component {

render() {

return (

// 尝试把`alignItems`改为`flex-start`看看

// 尝试把`justifyContent`改为`flex-end`看看

// 尝试把`flexDirection`改为`row`看看

<View style={{

flex: 1,

flexDirection: 'column',

justifyContent: 'center',

alignItems: 'stretch',

}}>

</View>

);

}

};

深入学习以上我们已经介绍了一些基础知识，但要运用好布局，我们还需要很多其他的样式。对于布局有影响的完整样式列表记录在这篇文档中。现在我们已经差不多可以开始真正的开发工作了。哦，忘了还有个常用的知识点：如何使用 TextInput 组件来处理用户输入。 from:http://reactnative.cn/docs/flexbox/

样式

本文档贡献者：sunnylqm(100.00%) 在 React Native 中，你并不需要学习什么特殊的语法来定义样式。我们仍然是使用 JavaScript 来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。 style属性可以是一个普通的 JavaScript 对象。这是最简单的用法，因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。比如像下面这样：

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, Text, View } from 'react-native';

export default class LotsOfStyles extends Component {

render() {

return (

<View>

<Text style={styles.bigBlue}>just bigBlue</Text>

<Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>

<Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>

</View>

);

}

const styles = StyleSheet.create({

bigBlue: {

color: 'blue',

fontWeight: 'bold',

fontSize: 30,

red: {

color: 'red',

});

常见的做法是按顺序声明和使用style属性，以借鉴 CSS 中的“层叠”做法（即后声明的属性会覆盖先声明的同名属性）。文本的样式定义请参阅Text 组件的文档。现在你已经了解如何调整文本样式了，下面我们要学习的是如何控制组件的尺寸。 from:https://reactnative.cn/docs/style/

State（状态）

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。一般来说，你需要在 constructor 中初始化state（译注：这是 ES6 的写法，早期的很多 ES5 的例子使用的是 getInitialState 方法来初始化 state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了，所以文字内容应该是一个prop。而文字的显示或隐藏的状态（快速的显隐切换就产生了闪烁的效果）则是随着时间变化的，因此这一状态应该写到state中。

import React, { Component } from 'react';

import { Text, View } from 'react-native';

class Blink extends Component {

constructor(props) {

super(props);

this.state = { isShowingText: true };

// 每1000毫秒对showText状态做一次取反操作

setInterval(() => {

this.setState(previousState => {

return { isShowingText: !previousState.isShowingText };

});

}, 1000);

}

render() {

// 根据当前showText的值决定是否显示text内容

if (!this.state.isShowingText) {

return null;

}

return (

<Text>{this.props.text}</Text>

);

}

export default class BlinkApp extends Component {

render() {

return (

<View>

</View>

);

}

实际开发中，我们一般不会在定时器函数（setInterval、setTimeout 等）中来操作 state。典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后。你也可以使用一些“状态容器”比如Redux来统一管理数据流。每次调用setState时，BlinkApp 都会重新执行 render 方法重新渲染。这里我们使用定时器来不停调用setState，于是组件就会随着时间变化不停地重新渲染。 State 的工作原理和 React.js 完全一致，所以对于处理 state 的一些更深入的细节，你可以参阅React.Component API。译注：提示一些初学者应该牢记的要点：一切界面变化都是状态state变化 state的修改必须通过setState()方法 this.state.likes = 100; // 这样的直接赋值修改无效！ setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性 setState 是异步操作，修改不会马上生效看到这里，你可能觉得我们的例子总是千篇一律的黑色文本，太特么无聊了。那么我们一起来学习一下样式吧。 from:https://reactnative.cn/docs/state/

Props（属性）

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。以常见的基础组件Image为例，在创建一个图片时，可以传入一个名为source的 prop 来指定要显示的图片的地址，以及使用名为style的 prop 来控制其尺寸。

import React, { Component } from 'react';

import { Image } from 'react-native';

export default class Bananas extends Component {

render() {

let pic = {

uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'

};

return (

);

}

译注：在 iOS 上使用 http 链接的图片地址可能不会显示，参见这篇说明修改。从 Android9 开始，也会默认阻止 http 请求，请参考相关配置请注意{pic}外围有一层括号，我们需要用括号来把pic这个变量嵌入到 JSX 语句中。括号的意思是括号内部为一个 js 变量或表达式，需要执行后取值。因此我们可以把任意合法的 JavaScript 表达式通过括号嵌入到 JSX 语句中。自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props，然后按需处理即可。下面是一个例子：

class Greeting extends Component {

render() {

return (

<Text>Hello {this.props.name}!</Text>

</View>

);

}

export default class LotsOfGreetings extends Component {

render() {

return (

</View>

);

}

我们在Greeting组件中将name作为一个属性来定制，这样可以复用这一组件来制作各种不同的“问候语”。上面的例子把Greeting组件写在 JSX 语句中，用法和内置组件并无二致——这正是 React 体系的魅力所在——如果你想搭建一套自己的基础 UI 框架，那就放手做吧！上面的例子出现了一样新的名为View的组件。View 常用作其他组件的容器，来帮助控制布局和样式。仅仅使用props和基础的Text、Image以及View组件，你就已经足以编写各式各样的 UI 组件了。要学习如何动态修改你的界面，那就需要进一步学习 State（状态）的概念。 from:https://reactnative.cn/docs/props/

M	T	W	T	F	S	S
« Sep
				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	29	30	31