part1

1. 定位：默认 position：relative，position：absolute 相对父元素

<View>
    <View>
        <View style={{height: 200, width: 200, backgroundColor: 'red', position: 'absolute'}}/>
    </View>
    <View style={{height: 100, width: 100, backgroundColor: 'pick'}}/>
    <View style={{height: 100, width: 100, backgroundColor: 'blue', position: 'absolute'}}/>
</View>

• flexDirection 默认是 column
• View 默认撑满容器
• 所有的宽度和高度必须是确定的（flex 或固定值）

2. ScrollView

• 本身是 flex：1的，高度由外层容器决定
• 内容必须有确定高度，不能是 flex

3. ListView：

• 分组：renderSectionHeader

constructor() {
    super();

    this.ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2,
        sectionHeaderHasChanged: (s1, s2) => s1 !== s2
    });
    let sections = {
        part1: [],
        part2: []
    };
    for (let i = 0; i < 10; i++) {
        if (i < 10) {
            sections.part1.push(i)
        } else {
            sections.part2.push(i)
        }
    }
    this.state = {
        noMore: false,
        sections: sections,
        dataSource: this.ds.cloneWithRowsAndSections(sections),
    };
}

<View style={{flex: 1, padding:100}}>
    <ListView
        ref="ListView"
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <View style={{flex: 1, borderBottomWidth: 1, borderColor: '#ccc'}}><Text
            style={{padding: 10, fontSize: 14}}>{rowData}</Text></View>}
        renderSectionHeader={(sectionData, sectionID) => <Text
            style={{padding: 10, backgroundColor: 'pink'}}>{sectionData} {sectionID}</Text>}
        refreshControl={refreshControl}
        loadControl={loadControl}
    />
</View>

4. 动画

• 设置初始值：Animated.Value 设置一个或多个初始值（透明度、位置等）
• 设置动画状态：Animated.timing 等函数

_animate(){
    this.state.angle.setValue(0);
    this._anim = Animated.timing(this.state.angle, {
        toValue:1,
        duration: this.props.speed,
        easing: Easing.linear
   }).start(() => this._animate())
}

• 启动、停止动画：组件销毁时，一定要销毁动画
  RN、QRN 里所有异步的内容，在组件销毁时都需要处理，因为 JSCore 是不销毁的。

componentDidMount(){
    this._animate();
}

componentWillUnmount(){
    if(this._anim){
         this._anim.stop();
        this._anim = null;
    }
}

5. 开发者可以通过 class Demo extends QXXX {} 的方式创建 QReact View 或 Component，并使用 QReact 的插件特性。在你引用 Ext 进来的同时，会默认引入全局变量 QView 和 QComponent。
6. Router 的使用：封装原生的 Navigator 组件，无需手动配置路由映射关系，RN、QRN 本来就没有 url，根本不存在路径。

• 定义页面（QView）

class PageA extends QView{}
class PageB extends QView{}

• 配置入口

import './PageA';
import './PageB';

Ext.defaults.hybridId = 'HelloWorld';
Ext.defaults.appName = 'HelloWorld';
Ext.defaults.indexView = 'PageA';

• 调用 API 跳转

Ext.open('PageA');
//....
Ext.back();

7. Hy 并不具备中间页面的功能，Hy 是多页的，一个页面是一个 native 页面；RN 是伪多页，多个页面是一个 native 页面。

part2

---

1. Chrome 调试：

• 关掉你的本地代理
• 会自动开启调试窗口
• 保证只有一个调试窗口，调试窗口在浏览器最上层
• 开启 Debug Mode，关掉 Minify

2. 项目入口：iconfont

import { FontLoader } from ''qunar-react-native;
FontLoader.loadFontSet(require('QFontSet'));

在 QRN 中使用 iconfont：

• 生成 iconfont http://iconfont.corp.qunar.com/
  项目名必须是 hybridId 或 hybridId_xxxx
• 配置 iconfont：只需要 ttf

module.exports = {
   'hybridId': 'https://s.qunarzz.com/../hybridId.ttf'
}

使用：

<Text style={{fontFamily: ''}}

part3

---

1. 获取屏幕像素密度的方法

• React：window.devicePixelRatio
• RN/QRN: PixelRatio.get()

2. 获取页面宽高的方法

• RN：Dimensions.get('window').width/height
• React: document.documentElement.clientHeight/clientWidth

3. 获取状态栏高度的方法

• Dimensions.get('window').statusBarHeight