React Native学习记录--1

搭建配置环境

这部分大家跟这个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 直接打开，结果出现not found。然后去百度，这的是说什么都有的
最后总结如下：
2个方法
1 降级到0.45 以下
2 下载boost_1_63_0

image.png

按照路径更换，就没有问题了

IDE

IDE的选择 是使用了官方的Nuclide
具体操作
根据这个网站的操作来
http://www.hangge.com/blog/cache/detail_1490.html
不过更新有一些变化，在评论也有网友出现问题。因为作者环境比较老，也没有回答。我这里补充一下。

image.png

首先第一个问题：
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文件结构

image.png

把注册操作都放在app.js中，在index.ios.js和index.andriod.js中引入app.js

1. 项目的导航结构
   因为我本身是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 }) => (
          
        ),

      })
    ),
  }
},{
  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

收尾。。。