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

TeresaPARK 9年前

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

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

相关经验

目录