part1
- 定位：默认 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 或固定值）
- ScrollView
- 本身是 flex：1的，高度由外层容器决定
- 内容必须有确定高度，不能是 flex
- 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>
- 动画
- 设置初始值：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;
}
}
- 开发者可以通过 class Demo extends QXXX {} 的方式创建 QReact View 或 Component，并使用 QReact 的插件特性。在你引用 Ext 进来的同时，会默认引入全局变量 QView 和 QComponent。
- 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();
- Hy 并不具备中间页面的功能，Hy 是多页的，一个页面是一个 native 页面；RN 是伪多页，多个页面是一个 native 页面。
part2
- Chrome 调试：
- 关掉你的本地代理
- 会自动开启调试窗口
- 保证只有一个调试窗口，调试窗口在浏览器最上层
- 开启 Debug Mode，关掉 Minify
- 项目入口：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
- 获取屏幕像素密度的方法
- React：window.devicePixelRatio
- RN/QRN: PixelRatio.get()
- 获取页面宽高的方法
- RN：Dimensions.get('window').width/height
- React: document.documentElement.clientHeight/clientWidth
- 获取状态栏高度的方法
- Dimensions.get('window').statusBarHeight
