美文网首页
RN or QRN 知识点

RN or QRN 知识点

作者: McDu | 来源:发表于2018-03-30 18:43 被阅读24次

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 或固定值)
  1. ScrollView
  • 本身是 flex:1的,高度由外层容器决定
  • 内容必须有确定高度,不能是 flex
  1. 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>
  1. 动画
  • 设置初始值: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;
    }
}
  1. 开发者可以通过 class Demo extends QXXX {} 的方式创建 QReact View 或 Component,并使用 QReact 的插件特性。在你引用 Ext 进来的同时,会默认引入全局变量 QView 和 QComponent。
  2. 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();
  1. Hy 并不具备中间页面的功能,Hy 是多页的,一个页面是一个 native 页面;RN 是伪多页,多个页面是一个 native 页面。

part2


  1. Chrome 调试:
  • 关掉你的本地代理
  • 会自动开启调试窗口
  • 保证只有一个调试窗口,调试窗口在浏览器最上层
  • 开启 Debug Mode,关掉 Minify
  1. 项目入口:iconfont
import { FontLoader } from ''qunar-react-native;
FontLoader.loadFontSet(require('QFontSet'));

在 QRN 中使用 iconfont:

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

使用:

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

part3


  1. 获取屏幕像素密度的方法
  • React:window.devicePixelRatio
  • RN/QRN: PixelRatio.get()
  1. 获取页面宽高的方法
  • RN:Dimensions.get('window').width/height
  • React: document.documentElement.clientHeight/clientWidth
  1. 获取状态栏高度的方法
  • Dimensions.get('window').statusBarHeight

相关文章

  • RN or QRN 知识点

    part1 定位:默认 position:relative,position:absolute 相对父元素 fle...

  • 醣质营养素,改变您的亚健康

    http://mp.weixin.qq.com/s/HWOpKovWv4qrn8-rlJJyXQ

  • RN知识点

    如果是第一个控件,margin将参照父控件,如果不是第一个控件,将参照上一个控件。 什么时候用{}: 包装对象的时...

  • RN知识点总结

    5月份入坑Rn..刚开始不知道怎么跳转页面、怎么写点击事件、怎么传值封组件。慢慢的一点点积累学习,以下是刚入坑那会...

  • RN小知识点

    关于 createStackNavigator包含createBottomTabNavigator, 还是crea...

  • RN-知识点汇总

    打开chrome调试:手机或模拟器上打开start remote JS Debugging 浏览器地址栏输入:ht...

  • RN的琐碎知识点

    1.ScrollView不能通过style使用alignItems:'center',而是得通过contentCo...

  • 【React Native】Flexbox弹性布局

    作为一名RN初学者(连菜鸟都算不上),在学习RN的过程中对一些知识点做一些记录,顺便加上一些自己的理解。如有说错之...

  • React Native 结合ScrollableTab、Ref

    正好刚开始学RN,熟悉一下控件和基本使用。 涉及的知识点: 1、fetch网络请求,get 拼接参数,解析json...

  • React Native 的布局方式  flexbox 

    RN排列方式 flexbox 这两天看了一下react native 果然是布局很高效,最重要的知识点都在下面的...

网友评论

      本文标题:RN or QRN 知识点

      本文链接:https://www.haomeiwen.com/subject/wlmbcftx.html