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

TeresaPARK 8年前

来自: http://www.jdon.com/47896

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

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

1.一次学习,到处编写, 跨设备平台通常都不好,通常为了满足一些低级通用标准导致最后结果是次优的,而React Native使用非死book同样的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修改过]

</div>