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

              
banq 16-02-27

这是来自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。

Developing our first iOS App with React Native | C
[该贴被banq于2016-02-27 14:26修改过]

2