ReactXP文档笔记整理

smallmouse 发布于7月前 •最后由 4月前回复 阅读293次
1 条评论

本身兼容web,ios,android,win,视图层不同,逻辑大部分可复用
推荐使用typeScript和flow http://www.typescriptlang.org...
建立在ReactNative之上,同时对web和win做了兼容
相比ReactNative,多了app运行状态和触摸手势
既可以直接使用RN的api和component , 又可以直接操作DOM
区别于react-native-web:ReactXP是建立在RN和React之上的 , 而react-native-web是并行在RN里面的

    ReactXP提供的一系列组件,props,style是已经兼容四大平台的,无需增加判断

区别于xanmarin: 由C#编写,2016年初被微软收购,提供了一整套编码,测试,性能分析,自动化测试和分布的流程,性能更高效,但是不能运行在web端
TypeScript 1.6 开始支持JSX语法

语法:

class HelloWorld extends RX.Component<P , S>{ render(){ return (<RX.Text></RX.Text>) } }   //P:props   S:state (有定义的话必须传入)
Styles: 定义: container:RX.Styles.createViewStyle({ … })  // RX.Styles方法是必须的
布局: flexBox margin padding 
事件处理: onPress = ( e:RX.SyntheticEvent ) => { e.stopPropagation() … }

Styles:

组合写: style = {[ styles.baseStyle , this.state.hoving && styles.hovingStyle]}  // 意思是:当鼠标滑过组件则加载hovingStyle
style缓存: 禁用缓存很重要,否则会引起内存泄漏 , 方法:RX.Styles.createViewStyle({ … } , false)
flexBox: 有点区别于css的flex,默认和RN的flexBox类似
              只支持px为单位,不支持百分比等其他单位
              flexDirection默认为column .
position默认为relative,不支持fixed
borderStyle: ’solid’ | ‘dotted’ | ‘dashed’ | ‘none’   //支持border样式,可单独设置四角的样式
shadow: ( 阴影 )
    shadowOffset:{width,height}    // number
    shadowRadius:number
    shadowColor: string
    elevation:number  // 仅支持安卓,海拔高度
其他: (仅支持web)
    wordBreak: ‘break-all’ | ‘break-word’  // 换行  all:会打断单词  word:不会打断单词
    appRegion: ‘drag’ | ‘no-drag’  //鼠标拖拽动作?
    cursor: ‘pointer’ | ‘default’ 
Transform:{
    prescpective:string  // 透视
    rotate:string
    rotateX:string
    rotateY:string
    rotateZ:string
    scale:number
    scaleX:number
    scaleY:number
    translateX:string
    translateY:string
}
Text相关:
    textDecorationLine:’none’ | ‘underline’ | ‘line-through’ | ‘underline line-though’
    textDecorationStlye:’solid’ | ‘dotted’ | ‘dashed’ | ‘double’
    textDecorationColor: string
    writingDirection:’auto’ | ‘ltr’ | ‘rtl’  // 写作方向
    其他:(仅支持android)
        includeFontPadding: bool    //字间距
        textAlignVertical:’auto’ | ‘top’ | ‘center’ | ‘bottom’   //垂直对齐方式
Animatad:
    初始化: new RX.Animated( number )

组件:

ActivityIndictor   //显示Loadin
Button: 可以当做View使用,子节点只能有一个
    delayLonePress: number   // 长按多少毫秒执行
    disable:bool
    onLongPress:func  
    onHoverStart:func
    onHoverEnd:func
    onPress:func    
    onPressIn:func
    onPressOut:func
    title:string
    disableTouchableOpacityAnimation:bool   // 仅支持iOS和Android , 是否显示按下的透明效果
    activeOpacity: number  // 仅支持iOS和Android , 点击时的透明度
    underlayColor:string  // 仅支持iOS和Android , 点击时的背景色
    focus() 
GestureView  //控制手势的组件
    onPinchZoom:func  // 在屏幕上捏合
    onRotate:func        // 在屏幕上旋转
    onScrollWheel:func // 滚动鼠标滚轮
    mouseOverCursor:  // 鼠标光标经过
    onPan:func              // 拖动(适合鼠标和手势)
    onPanVertical:func  // 竖向拖动(适合鼠标和手势)
    onPanHorizontal:func  // 横向拖动(适合鼠标和手势)
    onTap:func              // 点击
    onDoubleTap:func  // 双击
    panPixelThreshold:number  // 设置位移量来识别是不是pan操作
Image 
    accessibilityLabel:string   // 如果图片不能加载显示的文字
    headers:obj    // 设置图片加载的请求头
    resizeMode: ‘repeat’ | ‘contain’ | ‘cover’ | ‘auto’    // 图片的排列规则    
    title:string   // 图片提示信息
    shouldRasterIOS: bool    // 栅格化图片以外的内容, 性能优化 (用于iOS)
    getNativeHeight()  // 得到原始图片的高度,必须在onLoad方法后调用
    getNativeWidth()   // 得到原始图片的宽度,必须在onLoad方法后调
Link
    allowFontScaling: bool    // 字体是否根据系统设置缩放  ios/android only
    maxContentSizeMultipler:number   // allowFontScaling设为true时,限制最大值
    numberOfLines:number
    onHoverStart:func 
    onHoverEnd:func
    onPress:func
    onLongPress:func
    selectable:bool   // 链接是否可以包含在文本中
    title
    url
ScrollView
    必须有一个明确的高度(垂直滚动),宽度(横向滚动)
    onContentSizeChange:func   // 当滚动视图内容发生变化时调用
    onLayout:fun   // 当布局发生变化时调用
    onScrollBeginDrag:func   // 开始滚动时调用
    onScrollEndDrag:func     // 滚动结束时调用
    add/setScrollLeft({scrollLeft:number,animated:bool})   // 设置滚动位置
    add/setScrollTop({scrollTop:number,animated:bool})   
Text
    布局规则不能用flex,而是文本自己的规则
    selectable:bool     // 文本是否可选,影响复制等,默认false
    disableFullscreenUI: false   // 是否禁用全屏编辑模式

方法:

App  // 返回app的运行状态 , 后台运行还是前台运行,还是没有运行
    可以指定开发模式:develop , debug
Alert    
    提示对话框
International
    设置书写顺序(从左到右还是从右到左)
Clipboard  
    剪切板
Input
    keyDownEvent:func  
    keyUpEvent:func
    backButtonEvent:func    // android only 点击安卓返回键
Linking  
    和别的应用程序交互
    getInitialUrl()  // 返回启动app的url
    onenUrl()
Location
    获取地理位置
Modal  
    用来控制视图之间的相互遮挡关系 , 存在一个堆栈
Network
    获取当前网络连接类型
Platform
    获取当前平台类型
Popup
    类似于Toast组件,在页面的上面显示
StatusBar
    移动端设置最上面bar的样式
Storage
    相同于localStorage的操作

其他

Database  数据库
    比storage更加复杂的数据库    https://github.com/Microsoft/NoSQLProvider
ImageSvg
    显示一个本地或者网络的图片,控制填充颜色,笔触宽度和颜色
REST Client
    network api提供了识别网络连接的方法,但是没有提供主动连接的方法
Video
    提供视频播放,暂停,回放等功能
VirtualListView     
    垂直滚动组件
    和RN里面的ListView不同的是支持不同高度和不同类型的异构项
    每个子节点必须有明确的高度
    有很多优化性能的方法
UserInterface
    setMainView用于android和ios将根组件注册,类似于RN的AppRegest
    

查看原文: ReactXP文档笔记整理

  • organiccat
  • redfish
  • goldenostrich
  • bigfrog
  • beautifulostrich
  • geewonii
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。