创业公司开发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的技术，笔者都在真实项目中使用过。 正因为都用过，所以各自的坑有都进去过，虽然因为学的东西多，导致精力分散，很多技 […]

react-navigation示例

App.js

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
32
33
34
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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>
        <Text> 2 </Text>
      </View>
    )
  }
}
 
const styles = StyleSheet.create({})

  pages/HomeScreen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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>
        <Text> one </Text>
        <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"将会被翻译为"🍕🍕🍕"。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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 (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}

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

使用Flexbox布局

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
 
export default class FlexDirectionBasics extends Component {
  render() {
    return (
      // 尝试把`flexDirection`改为`column`看看
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

  Justify Content 在组件的 style 中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元 […]

样式

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

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
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.red}>just red</Text>
        <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 组件的文档。 现在你已经了解如何调整文本样式了，下面我们要学习的是如何 […]

State（状态）

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

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
32
33
34
35
36
37
38
39
40
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>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

实际开发中，我们一般不会在定时器函数（setInterval、setTimeout 等）中来操作 state。典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后。你也可以使用一些“状态容器”比如Redux来统一管理数据流。 每次调用setState时，Blin […]

Props（属性）

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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 (
      <Image source={pic} style={{width: 193, height: 110}} />
    );
  }
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Greeting extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}
 
export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

&n […]