React Native Framework -- RN 开发框架

URL

Intro

目录结构

.
├── andriod/                 # 安卓相关文件目录
├── bin/                     # 项目自动化配置文件
├── build/                   # 编译打包地址目录
├── doc/                     # 工程相关文档目录
├── ios/                     # ios相关文件目录
├── app                      # 源码目录
│   ├── images/              # 图片目录
│   ├── screens/             # 每个页面代码存放目录
│   ├── components/          # 组件目录
│   ├── containers/          # 容器组件目录
│   ├── styles/              # 样式对象文件目录
│   └── config.js            # 全局配置文件
├── .babelrc                 # babel 文件
├── index.android.js         # 安卓端入口文件
├── index.ios.js             # ios端入口文件
├── .editorconfig            # 配置编辑器
├── .gitignore               # 配置忽略文件
├── .watchmanconfig          # 配置忽略文件
├── gulpfile.js              # gulp任务配置
├── package.json             # 项目配置,依赖第三方模块,依赖的库
└── README.md                # 项目说明

组件列表

• MImage 图片优化组件 /component/image/
• 下拉刷新组件(美柚两点旋转下拉刷新组件) /component/native/refreshControl.js
• 下拉刷新组件(美柚小柚子旋转下拉刷新组件) /component/native/refreshControl1.js
• 搜索框

0.48版本升级

purecomponent

React.createClass

var createReactClass = require('create-react-class');

var Component = createReactClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

React.PropTypes

// After (15.5)
import React from 'react';
import PropTypes from 'prop-types';

class Component extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Component.propTypes = {
  text: PropTypes.string.isRequired,
};

分层架构

• src/common/ 存放底层方法的封装，网络请求、协议跳转、事件监听等和Native 进行的交互的方法。

样式

config.toPx(num): 绝对像素;比如 borderwidth 为1px；

趟过的坑

1. 页面有两个地方需要手动配置app文件

• 为支持gif图片，打开android/app/build.gradle加入下面代码

  dependencies: { 
    ...
       // For animated GIF support
      compile 'com.facebook.fresco:animated-base-support:0.11.0'  
      // For WebP support, including animated WebP
      compile 'com.facebook.fresco:animated-gif:0.11.0'  
      compile 'com.facebook.fresco:animated-webp:0.11.0' 
      compile  'com.facebook.fresco:webpsupport:0.11.0'  

• 为支持iconfont,需安装react-native-vector-icons 配置方法见https://github.com/oblador/react-native-vector-icons ， 目前代码里安卓已经配置好，ttf文件已经拷贝到.\android\app\src\main\assets\fonts ，ios还未配置，需自行配置

3. debugger页面跳转报错

running is not ready for debugging

解决办法：localhost 改为你本机的地址 

使用的第三方组件

动画组件 react-native-animatable

相关资料

• 必备知识点

  • react
  • react-native
  • dimensions

• React Native 必备组件

  • React Native 中文文档
  • asyncstorage
  • navigator
  • ScrollView

• 第三方插件

  • react-native-swiper
  • react-native-storage
  • react-native-busy-indicator
  • react-native-responsive-image

• 第三方工具

  • object-path-immutable

• 学习资料库

  • react-native-guide
  • react-native的兼容性（Android、Ios）
  • 像素比率
  • 如果改变了text的高度，怎么让里面的文字垂直居中？
  • react-native 布局示例
  • react native布局
  • React Native之FlexBox布局
  • React-Native入门指南
  • 如何判断设备是ios还是android
  • React Native 触摸事件处理详解
  • 关于ReactNative 中 this 踩过的坑
  • React Native 触摸事件处理详解
  • React Native: Android 的打包
  • 携程魏晓军：React Native Bundle拆分
  • React Native ios打包
  • Bable Usage Options

• 其它组件(项目中没有使用到，仅供学习)

  • react-native-css