一个上线了的React-Native的项目总结

#1

最近1个月完成了一个RN的项目，这里记录一下，以备后面的总结
项目内容

  1. 登录
  2. 根据剪贴板的内容查找数据
  3. 显示查找后的数据，并对这个数据进行一些处理

平台支持
iOS和Android
iOS已经上架2版

开发方式和架构内容

  1. 使用Git作为版本管理
  2. 使用Atom作为开发工具，XCode辅助，没有用Android Studio
  3. 使用CodePush作为js package的升级工具
  4. 使用Redux作为React的数据框架
  5. 使用Stackoverflow和React的issue list作为主要的知识查找
  6. 开发了一些自己使用的Android的插件，因为Android不支持Onresume事件，所以自己写了插件，后面会open出来
  7. 主要使用ios做开发，然后Android适配
  8. 使用了自定义字体作为图标，进入了ttf文件
  9. 使用eslint做js的静态检查

总结

  1. ios还是比较稳定并且功能也比较全
  2. Android的坑是有不少，比如：不支持Shadow，还有对absolute的布局支持的也不够好
  3. Android的事件支持的不好，很多事件还没有支持
  4. Android的性能好像也不是很好，但是，也能凑合用
  5. Android的原生控件封装的不好
  6. 如果希望代码复用高，最好让iOS和Android尽量保持样式的一致
  7. 这篇文章对我在Mac上调试Android有很大帮助

使用到的第三方库

  1. Redux
  2. Redux-react
  3. ImmutableJS
  4. moment
  5. React-native 0.14.1
  6. react-native-android-statusbar
  7. react-native-clipboard ，因为owner很久不维护，我做了一些修改，后面会open出来
  8. react-native-code-push
  9. react-native-device
  10. react-native-icons
  11. react-native-keyboard-spacer
  12. react-native-navbar"
  13. react-native-simpledialog-android
  14. redux-thunk
13 Likes
#2

好东西啊！原来还有CodePush这种神器！

我现在也用React Native + Redux来尝试开发，但是我发现样式布局上还是有一些不熟悉的地方。比如说：当我使用了NavigatorIOS的时候，如果render了一个ScrollView或者ListView，那么就会自动放在navigator的下面；如果render了一个View，那么内容就会被navigator挡住一部分。。。 @tantan 你比较推荐的作为page component的组件是什么？就是用ScrollView和ListView吗？

还有希望可以交流一下你的router是怎么处理的？我是把初始化好的Navigator变成一个全局变量。

谢谢分享~

#3

还有，好像所有React Native的交互事件，都没有默认绑定this，比如点击，必须要this.onClick.bind(this)，否则onClick的this就不是component自己，这个跟React的行为不一样，也挺奇怪的。

#4

用es6的 ()=>{} 解决

#5

官方建议用Navigator，所以，如果可能，尽量用Navigator，这样ios和Android都能统一，而且页面的掌控性也好些，我目前没有用router

#6

用es6的 ()=>{} 解决

主要有些复杂逻辑的不太适合内嵌写

官方建议用Navigator，所以，如果可能，尽量用Navigator，这样ios和Android都能统一，而且页面的掌控性也好些，我目前没有用router

我也是用的Navigator，当navigator初始化完成以后，把instance作为global variable，然后取名叫router。。。

那你的页面级的element都是用的ScrollView或者ListView吗？有没有用其他的element？我用View作为页面级的element就会被navigator盖住一部分，ScrollView或ListView又不会，这个感觉比较奇怪

#7

你之前一次分享是react，那时候，你使用了React + Flux + React-router+ material-ui + ImmutableJS

为什么后来改用了Redux呢？
而且不用router，是怎么样的考虑~，是否是因为用了Navigator？

#8 
()=>{this._getXXX()}

这里的this就是外面的this，这是es6支持的方式

Navigator应该不需要作为global的吧，至少我没有那么用
我主要是用View做的root element，没有遮挡

[初学求助]navigatorIOS component y轴不能自动从导航栏以下开始的问题
#9

我非常看好Flux这类框架，但是，确实原生的Flux写起来有些代码冗余，
由于当时的项目早，加上没有成熟的类Flux的库，所以，Flux是最合适的选择
Redux是一个简洁的而且很容易扩展的状态管理框架，思想源于Flux，而且代码更简洁，所以，我后面用了Redux

目前我没有用router，是因为我没有找到合适的router能和Navigator结合的，如果你有推荐，请告诉我，谢谢

#10

感谢回答，

有没有好的react native 的 QQ群，或者微信群推荐呢

#11

目前没有加入过任何群组， :grinning:

#12

@tantan 看来，Stackoverflow才是王道

#13

能不能分享你app，让我体验一下，哈，witer.wu@qq.com

#14

是的，关注一下主要的官网就可以了

#15

Appstore地址

#16

企业级应用，不方便看，不好意思，如果你有技术上的问题，可以随时交流

#17

好滴，感谢~
就是想知道，是不是各种原生的app的功能，基本都能完成。

#18

不能保证都可以，但是，大部分是可以的，因为是一个全新的平台，所以，也要从UI设计上做一些折中和妥协，还要找一些npm上的组件，如果实在没有RN有插件机制，就要自己开发一下了

1 Like
#19

好的，

还有一个问题，你本身是用的obj-c语言在负责开发ios的吗。
不懂obj-c的话，是否同样可以搞定这些事。

#20

我这边又看了下，还是有遮挡的问题，能不能麻烦你给看看，谢谢！

下面是使用View作为root element的代码：

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

export default class extends Component {
  render() {
    return (
      <View>
        <Text>Home</Text>
        <Text>Home</Text>
        <Text>Home</Text>
        <Text>Home</Text>
        <Text>Home</Text>
        <Text>Home</Text>
      </View>
    );
  }
}

下面是效果：

可以挺明显的看到被遮挡了。。。

然后使用ScrollView的话，下面是代码：

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

export default class extends Component {
  render() {
    return (
      <ScrollView>
        <Text>Home</Text>
        <Text>Home</Text>
        <Text>Home</Text>
        <Text>Home</Text>
        <Text>Home</Text>
        <Text>Home</Text>
      </ScrollView>
    );
  }
}

下面是截图：

又没有遮挡了。。。

下面是Navigator的代码：

import React, { Component, NavigatorIOS } from 'react-native';

import { Home } from '../constants/routes';

export default class extends Component {
  render() {
    return (
      <NavigatorIOS ref="navigator"
                    style={{flex: 1}}
                    initialRoute={Home()}/>
    );
  }
}