2017-11-08 14:34:53 kuangshp128 阅读数 485
  • 海思平台OSD的实现-第8/11季

    OSD(on screen display)功能应用很广泛,譬如监控视频中的实时时间显示、电视转播中的台标和字幕等。本季讲解如何在海思平台上实现图像OSD,核心是海思SDK中提供的OSD功能相关的一些API的使用和调试技巧。

    880 人正在学习 去看看 朱有鹏

css3中提供了一个弹性盒子布局适合手机端开发,在reactNative官方也推荐使用的布局方式,至于概念就不去介绍,就介绍几个常用的属性。更多信息请查阅阮一峰

一、区分容器属性与项目属性

简单来说你使用了display:flex的元素就是容器属性,它下面的元素就是项目属性

二、常见的容器属性

  • 1、flex-direction 决定项目是水平排列还是垂直排列
    • row 水平排列
    • row-reverse 水平反向排列
    • column 垂直排列
    • column-reverse 垂直反向排列
  • 2、flex-wrap 决定项目如果一行排列不下以什么方式展示
    • nowrap 不换行
    • wrap 换行
    • wrap-reverse; 换行排列在上面
  • 3、flex-flow 是flex-direction属性和flex-wrap属性的简写形式可以不去理会
  • 4、justify-content 项目在主轴上的对齐方式
    • flex-start 开始位置
    • flex-end 结束位置
    • center 中间
    • space-between 两端对齐,项目之间的间隔都相等
    • space-around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
  • 5、align-items 项目在交叉轴上的对齐方式
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch
  • 6、align-content 多根轴线的对齐方式

三、常见的项目属性

  • 1、order 排序方式,数字越小就越在前面
  • 2、flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
  • 3、flex-shrink 定义了项目的缩小比例,默认为1
  • 4、flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间
  • 5、flex 是flex-grow、flex-shrink和flex-basis三属性的简写总和
  • 6、align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

项目属性中常用的flex:1表示平分 align-self表示单独定义项目的布局方式

2018-03-20 21:54:28 cn15122497660 阅读数 41
  • 海思平台OSD的实现-第8/11季

    OSD(on screen display)功能应用很广泛,譬如监控视频中的实时时间显示、电视转播中的台标和字幕等。本季讲解如何在海思平台上实现图像OSD,核心是海思SDK中提供的OSD功能相关的一些API的使用和调试技巧。

    880 人正在学习 去看看 朱有鹏
1. display:该属性用来元素指定元素是否为伸缩容器,语法为:display:flex  |  inline-flex
2. flex-direction : 该属性用于指定主轴的方向,语法为:flex-direction : row   | row-reverse   |    column-reverse
    row : (默认值) 伸缩容器若为水平方向轴,伸缩项目的排版为从左向右排列。
        flex--container{
            display : flex;
            flex-direction : row;               
        }                                                         

布局排列样式为:


    row-reverse: 伸缩同期为水平方向轴,绳索项目的排版方式为从右向左排列。
    
         flex--container{
            display : flex;
            flex-direction : row-reverse;               
        }       

布局排列样式为:
    

column: 伸缩容器若为垂直方向轴,伸缩项目的排版方式为从上到下排列。
    
         flex--container{
            display : flex;
            flex-direction : column;               
        }       
布局排列样式为:

column-reverse : 伸缩容器若为垂直方向轴,伸缩项目的排版方式为从下向上排列。
    
        flex--container{
            display : flex;
            flex-direction : column-reverse;               
        }
布局排列的样式为:
         

3. flex-wrap : 该属性主要用来指定伸缩容器的主轴线方向控件不足的情况下,是否换行以及该如何换行 
                        语法为:flex-wrap :nowrap  |  wrap  |  wrap-reverse

nowrap  : (默认值) 即使空间不足,伸缩容器也不允许换行。
    flex-container{
        display : flex;
        flex-direction :row;
        flex-wrap;nowrap;
        width:200px;
        height:150px;
    }
    布局排列效果如下:
       
    wrap:伸缩容器在空间不足的情况下允许换行,主轴为水平轴,则换行的方向为从上到下。
        flex-container{
            display:flex
            flex-direction:row;
            flex-wrap:wrap;
            width:200px;
            height:150px;
        }

布局排列效果如下:
    

wrap-reverse: 伸缩容器在空间不足的情况下允许换行,若主轴为水平轴,则换行的方向为从下到上,(和wrap相反)
    flex-container{
        display: flex;
        flex-direction: row;
        flex-wrap:wrap-reverse;
        width:200px;
        height:150px;
    }

   布局排列效果如下:
        

4. flex-flow: 该属性是flex-direction和flex-wrap属性的缩写版本,它同时定义了伸缩容器的主轴和侧轴,其默认值为row  nowrap
    语法为:flex-flow: flex-direction  flex-wrap  
    flex-container{
        display:flex;
        flex-flow: row   wrap-reverse;
        width: 200px;
        height: 150px;
    }

    布局排列效果如下:(和上图的效果一致)
        

5. justify-content : 该属性用来定义伸缩项目沿主轴线的对齐方式,
        语法为:justify-content: flex-start | flex-start | flex-end | center | space-between | space-around
    flex-start: (默认值) 伸缩项目想主轴线的起始位置靠齐。

    flex-container{
        display:flex;
        flex-direction:row;
        justify-content:flex-start;
        width:200px;
        height:150px;
    }
布局排列效果如下显示:
    

flex-end : 伸缩项目向主轴线的结束位置靠齐。

flex-container{
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
    width:200px;
    height:150px;
}
布局排列效果如下:
    

center: 伸缩项目向主轴的中间位置靠齐。
flex-container{
    display:flex;
    flex-direction:row;
    justify-content:center;
    width:200px;
    height:150px;   
}
布局排列效果如下显示:
    

space-between: 伸缩项目会平均地分布在主轴线里,第一个伸缩项目在主轴线的开始位置,最后一个伸缩项目在主轴的最终位置。

flex-container{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    width:200px;
    height:150px;
}
布局排列效果如下显示:
    

space-around:伸缩项目会平均地分布在主轴线里,两端保留一半的空间。

flex-container{
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    width:200px;
    height:150px;
}

布局排列效果如下显示:
    




2016-07-27 10:52:15 strawferry 阅读数 221
  • 海思平台OSD的实现-第8/11季

    OSD(on screen display)功能应用很广泛,譬如监控视频中的实时时间显示、电视转播中的台标和字幕等。本季讲解如何在海思平台上实现图像OSD,核心是海思SDK中提供的OSD功能相关的一些API的使用和调试技巧。

    880 人正在学习 去看看 朱有鹏

Flexbox布局样式 ReactNative是参考文档大于0.29的版本

参考链接

1. 6个属性设置在容器上

1.1 任何一个容器都可以指定为Flex布局。ReactNative无

display: flex;

display: inline-flex; //行内元素也可以使用Flex布局。
flex布局元素

1.2 flex-direction 属性决定主轴的方向(即项目的排列方向)。

flex-direction: row(默认值) | row-reverse | column | column-reverse;


ReactNative 中的 flexDirection: column(默认值) | column-reverse | row | row-reverse;
flex-direction 排列方向

1.3 flex-wrap 换行

flex-wrap: nowrap | wrap | wrap-reverse;


ReactNative 中的 flexWrap: nowrap | wrap ;
flex-wrap 换行

1.4 flex-flow flex-direction 和flex-wrap 的简写 ReactNative无

flex-flow : row || nowrap;
flex-flow

1.5 justify-content 水平排列方式

justify-content: flex-start | flex-end | center | space-between | space-around;

justify-content 水平排列方式

ReactNative中的 justifyContent: flex-start | flex-end | center | space-between | space-around;
justify-content 水平排列方式

1.6 align-items 垂直排列方式

align-items: flex-start | flex-end | center | baseline | stretch;
align-items 垂直排列方式


ReactNative中的 alignItems: flex-start | flex-end | center | stretch;
align-items 垂直排列方式

2. 容器中项目的属性

2.1 order ReactNative无

order :<number>; /* default 0 */属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
order

2.2 flex-grow ReactNative无

flex-grow:<number>; /* default 0 */属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
flex-grow

2.3 flex-shrink ReactNative无

flex-shrink: ; /* default 1 */属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。flex-basis
flex-shrink

2.4 flex-basis ReactNative无

flex-basis

2.5 flex ReactNative无

flex

2.6 align-self

align-self: auto | flex-start | flex-end | center | baseline | stretch;


ReactNative中的 alignSelf: auto | flex-start | flex-end | center | stretch;
alignSelf

3. FlexBox布局目前支持React Native 的属性

FlexBox布局目前支持React Native 的属性有如下6个:
(1) flex :number  大于0的时候才可伸缩,按照大小显示伸缩比例;
(2) flexDirection :column(容器设置的属性:主轴方向默认-垂直方向,从上倒下)| `column-reverse` | row(水平方向,从左到右)| `row-reverse`;
(3) flexWrap :wrap(换行) --nowrap(不换行)//容器设置的属性
(4) alignItems :flex-start | flex-end | center | stretch (容器设置的属性:伸缩项目在伸缩容器中的交叉轴的对齐方式);
(5) justifyContent : flex-start | flex-end | center | space-between | space-aronud (容器设置的属性:伸缩项目沿着垂直方向的对齐方式);
(6) alignSelf : flex-start | flex-end | center | auto | stretch。(伸缩项目在交叉轴的对齐方式);
(7) position : 'absolute' | 'relative' ;
(8) zIndex : number ;
2017-05-25 10:59:38 ll1109489444 阅读数 5611
  • 海思平台OSD的实现-第8/11季

    OSD(on screen display)功能应用很广泛,譬如监控视频中的实时时间显示、电视转播中的台标和字幕等。本季讲解如何在海思平台上实现图像OSD,核心是海思SDK中提供的OSD功能相关的一些API的使用和调试技巧。

    880 人正在学习 去看看 朱有鹏

搜遍全网都没有解决方法。

最后在GitHub找到了一个


解决方式是: 将View.propTypes改为ViewPropTypes


链接如下:(链接不能直接点击,复制链接到网页打开即可)

https://github.com/react-community/react-navigation/issues/1352



实验所得:webstorm的全局搜索View.PropTyes不全,用androidStudio全局搜索替换有较好效果

2017-08-17 22:03:17 weiyongliang_813 阅读数 4122
  • 海思平台OSD的实现-第8/11季

    OSD(on screen display)功能应用很广泛,譬如监控视频中的实时时间显示、电视转播中的台标和字幕等。本季讲解如何在海思平台上实现图像OSD,核心是海思SDK中提供的OSD功能相关的一些API的使用和调试技巧。

    880 人正在学习 去看看 朱有鹏

只能说antd mobile真的是为淘宝内部写的框架,竟然连固定NavBar显示的接口都没暴露出来。也就是NavBar不跟着屏幕滚动而滚动。

说实话如果是用reactNative 开发当然不需要该接口,但问题是现在项目是做需要挂在微信端使用的,如果不固定NavBar基本是没法使用。

第一步:其实固定NavBar非常简单,只要修改下css控制即可:我把下面这段css内容放在了Container.css里面


.am-navbar{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 0.9rem;
  background-color: #717176;
  position: fixed;
  z-index: 9999;
  top: 0;
  width: 100%;
  color: #fff;
}

第二步:由于将navBar变成flexd后,会遮盖相应控件,所以需要修改下appPage组件容器的上边距:

   <div style={{marginTop:".89rem"}}>
           {
             this.props.children
           }
         </div>

AppPage.js完整代码应该就是:

import  React,{Component} from 'react';
import { connect,dispatch } from 'react-redux' // 引入connect

import ReactCSSTransitionGroup from "react-addons-css-transition-group";
import style from "./Container.css";

class App extends Component {
  constructor(props, context) {
    super(props, context);
  }

  componentWillMount() {
    document.body.style.margin = "0px";
    //// 这是防止页面被拖拽
    //document.body.addEventListener('touchmove', (ev) => {
    //  ev.preventDefault();
    //});
  }

  render() {
    let {animateCls,pageNavTitle}=this.props.AppMd.AppMd;

    return (
      <ReactCSSTransitionGroup
        transitionName={animateCls}
        component="div"
        transitionEnterTimeout={400}
        transitionLeaveTimeout={400}>
        <div key={this.props.location.pathname}
             style={{position:"absolute", width: "100%"}}>
         <div style={{marginTop:".89rem"}}>
           {
             this.props.children
           }
         </div>
        </div>
      </ReactCSSTransitionGroup>
    );
  }
}
// 利用connect将组件与Redux绑定起来
export default connect((AppMd) => ({AppMd}))(App)

这下就搞定了,navBar就不会跟着屏幕滚动了,这样将界面嵌入到app中,足以以假乱真咯。

没有更多推荐了,返回首页