搭建配置环境
这部分大家跟这个RN中文网步骤来就行
http://reactnative.cn/docs/0.47/getting-started.html#content
不过这里，我记录一下我遇到的问题。
1 react-native run-ios （版本0.47）
创建好app之后，运行的时候出现
Entry, ":CFBundleIdentifier", Does Not Exist 一脸懵逼，然后想用XCode 直接打开，结果出现<React/RCTBundleURLProvider.h>not found。然后去百度，这的是说什么都有的
最后总结如下：
2个方法
1 降级到0.45 以下
2 下载boost_1_63_0
按照路径更换，就没有问题了
IDE
IDE的选择 是使用了官方的Nuclide
具体操作
根据这个网站的操作来
http://www.hangge.com/blog/cache/detail_1490.html
不过更新有一些变化，在评论也有网友出现问题。因为作者环境比较老，也没有回答。我这里补充一下。
首先第一个问题：
debug的问题。。新版的Nuclide 已经去掉的 debug的功能。。。所以你肯定找不到啊。
在Nuclide的更新中有说明
链接https://github.com/facebook/nuclide/commit/fccd95d310d021ad67a6e524066bd9ab91e0e3ca
第二个问题： flow 为什么版本无法选择。
我按照作者的方法 也是无法选择。不过我在网上找到另外一种一种方法
1 首先去下载指定的版本 修改下面 url 的版本号
https://homebrew.bintray.com/bottles/flow-0.42.0.sierra.bottle.tar.gz
2 然后解压到
‘/usr/local/Cellar/flow/
3 brew switch flow 0.42.0
中间出现错误 按提示删除link 就好
万事具备 开始撸代码
1文件结构
把注册操作都放在app.js中，在index.ios.js和index.andriod.js中引入app.js
- 项目的导航结构
因为我本身是iOS 开发，所以讲的角度，也大多从iOS的角度开始。其他开发兄弟见谅。
tab + nav 结构
首先我们要选用的是react-navigation 来实现我们的页面的导航。
在这边 我差点没转过弯，因为 我们开发iOS的时候，都是tab 中嵌套 nav。 但这个三方库就是推荐nav 中 嵌套 tab 。 当时感觉很绝望，最后屈服的理由是
如果我用tab 嵌套nav 我需要在每个页面去管理tab的隐藏。。。还是iOS大法好啊。
普通的nav 跳转
//讲组件在栈中注册
const Nav = StackNavigator({
Tab: { screen: Tab },
login: { screen: login }
},{
navigationOptions: {
headerStyle: { backgroundColor: color.theme }
},
});
//跳转
const { navigate } = this.props.navigation;
navigate('Chat', { user: 'Lucy' })
这里的navigationOptions 可以在初始化StackNavigator的时候赋值，也可以在组件的中赋值
Tab
const Tab = TabNavigator({
home: {
screen: home,
navigationOptions: ((navigation)=>({
tabBarLabel: '首页',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./resources/imgs/homeIcon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
})
),
}
},{
tabBarPosition: 'bottom',
animationEnabled: false,
tabBarOptions: {
activeTintColor: color.theme,
}
}
);
初始化 方式 和 Nav 差不多
在上面Nav初始化的时候，已经将Tab当做一个screen嵌入进去了
只要注册的时候
AppRegistry.registerComponent('XXXX', () => Nav);
具体细节请移步官方文档：https://reactnavigation.org/docs/intro/
网络请求
这里我简单的封装了系统的fetch
export default class networking {
static request(url,params,method,callback){
const path = 'XXXXX' + url
fetch( path , {
method: method,
body: JSON.stringify(params)
}).then((response) => response.json())
.then((responseJson) => {
callback(responseJson,null)
})
.catch((error) => {
callback(null,error)
})
}
}
二维码扫描
这里我用了
react-native-camera
这个三方库
这里要实现二维码扫描
onBarCodeRead的属性会返回 识别的data
这边在处理UI上有点坑。 组件无法设置上背景色。只能在上面再覆盖一层view。
在实现中间框的样式上，我是用了4个view 每个view显示了2个边框实现的。
具体 就不写了 有点low
收尾。。。
