转载

使用React Native开发第一个iOS应用

这是来自HireArt的Tom Tang分享他们第一次使用React Native开发iOS移动应用。

他们的背景是Web开发人员，不是专门的iOS开发人员，虽然，他们也知道Swift或Objective C如何的棒，但是更习惯于使用Ruby和Javascrip，他们的团队开始于2015早期使用Facebook的React，他们认为React Native有如下竞争优势：

1.一次学习，到处编写，跨设备平台通常都不好，通常为了满足一些低级通用标准导致最后结果是次优的，而React Native使用Facebook同样的React.js框架，但是为Android和iOS编写不同的项目，却可以使用同样的一套代码。

2.声明式视图，当他们在Web中使用React时，就非常喜欢React的声明式视图，同样在开发iOS时使用声明式视图意味着更容易可预测的代码和更少的bug。

3.移动flexbox，React Native使用flexbox机会支持所有浏览器

，使得制作布局更加直觉化。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

当然，除了这些优点化，他们对React Native最初还是有保留意见的：

1. React Native生态圈的限制，初期，基于React Native的各种iOS组件比较少，他们只能自己建立某个SDK(AWS 和Mixpanel).的React Native Bridge。

2.由于React Native升级更快，导致之前的一些代码被遗弃，因此只有在需要新版本新功能才决定升级。

3.网络无法搜索到错误，遭遇一些错误总是前人没有遇到过的，网络上很难查找。

他们还介绍一些组件包：

1. react-native-simple-store ，开始时是使用AsyncStorage，但是发现构建相同的保存和获取功能变得很冗长乏味，太烦人，而这个 Simple Store是基于AsyncStorage 之上构建，能够简单直接访问设备：


Store.get('user').then((user)=> {
  // some code
}).catch((error) => {
  console.warn(error)
}).done()

2. react-native-vector-icons ，这是最好的矢量图标工具包，与FontAwesome 和 EvilIcons可以完美地配合使用，MaterialIcons, IonIcons等能通过该包实现：


<Icon name='trophy' />
<EvilIcon name='check' />

3. tcomb-form-native ，表单创建使用这个包变得非常容易，你能够定义定制的表单inout类似键盘或自动纠正等的。


var Person = t.struct({
  name: t.String,              // a required string
  surname: t.maybe(t.String),  // an optional string
  age: t.Number,               // a required number
  rememberMe: t.Boolean        // a boolean
});

4. react-native-router-flux ，这个包将路由URL变得容易，定义你自己的路由规则，只需要一行代码就可以放入视图：

Actions.dashboard()

最后，Tom Tang也指出使用过程的不可思议奇怪之处，比如，不支持Styling内联，比如有下面CSS Style:


module.exports = StyleSheet.create({
  title: {
    fontSize: 23,
    textAlign: 'center',
    color: blueText,
    fontFamily: 'Avenir',
    fontWeight: '700',
  },
  header: {
    padding: 20,
    paddingTop: 30,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
})

Component.js：


...
<Text style={[Styles.header, {color: 'white'}]}>
  Some text
</Text>
...

标准的风格如下：

style={Styles.header}

而定制内联风格如下：

style={{color: 'white'}}

他们融合了两种方式的代码：

style={[Styles.header, {color: 'white'}]}

这相当黑了RN，但是不知道有其他什么办法？

另外一个问题是循环Requires/Navigation：这是使用NavigatorIOS时突然发生的，这是在开发某个页面来自哪上一个页面，下面将到哪下一个页面，在iOS中，视图是保存在堆栈中，试图获得一个之前保存在堆栈的组件将导致错误，放入当前组件也会导致一个循环require错误并中断，使用react-native-router-flux 能够解决这个问题，并能以更加合理更扩展性的方式编写路由。

总之，使用React Native开发iOS是一种非常棒的新的开发途径，能够帮助开发团队更快地从Web开发迁移到移动开发。最后他们还在博客中发布以下几个组件开发心得：

1. 登录与权限

2.API和回调

3.使用 RNBridge访问iOS SDK。

[该贴被banq于2016-02-27 14:26修改过]

原文 http://www.jdon.com/47896

正文到此结束