2018-05-09 14:36:57 al4fun 阅读数 8761
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

1 概述

在React Native中,flexbox定位和position定位可以同时使用,同时生效(关于flexbox定位的相关知识请自行查阅资料,这里不再赘述)。

positon有两个取值:relative(默认值)和absolute。

2 relative——相对定位

以元素本来的位置为基准进行偏移。

示例

export default class Test extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.p1}/>
                <View style={styles.p2}/>
                <View style={styles.p3}/>
                <View style={styles.p4}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
        backgroundColor:'#33ffff'
    },
    p1: {
        width: 50,
        height: 50,
        backgroundColor: 'red',
    },
    p2: {
        width: 50,
        height: 50,
        backgroundColor: 'yellow',
    },
    p3: {
        width: 50,
        height: 50,
        backgroundColor: 'blue',
    },
    p4: {
        width: 50,
        height: 50,
        backgroundColor: '#666',
        position: 'relative',
        left: 50,
        top: 50
    }
});

灰色方块本来的位置应该是靠在蓝色方块的下方并与蓝色方块左右对齐,通过position: 'relative',left: 50,top: 50使得灰色方块以其本来的位置为基准,向右、向下分别偏移了50个单位,效果如上图所示。

3 absolute——绝对定位

以父元素的边框为基准进行偏移。

示例

export default class Test extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.p1}/>
                <View style={styles.p2}/>
                <View style={styles.p3}/>
                <View style={styles.p4}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor:'#33ffff'
    },
    p1: {
        width: 50,
        height: 50,
        backgroundColor: 'red',
        position: 'absolute',
        left: 50,
        top: 50
    },
    p2: {
        width: 50,
        height: 50,
        backgroundColor: 'yellow',
        position: 'absolute',
        right: 50,
        bottom: 50
    },
    p3: {
        width: 50,
        height: 50,
        backgroundColor: 'blue',
        position: 'absolute',
        bottom: 50,
    },
    p4: {
        width: 50,
        height: 50,
        backgroundColor: '#666',
        position: 'absolute',
        bottom: 50,
        alignSelf: 'center'
    }
});

  • 红色方块:以父元素的左边框、上边框为基准,分别向右、向下偏移了50个单位。
  • 黄色方块:以父元素的右边框、下边框为基准,分别向左、向上偏移了50个单位。
  • 蓝色方块:以父元素的下边框为基准,向上偏移了50个单位。
  • 灰色方块:以父元素的下边框为基准,向上偏移了50个单位。左右位置由flexbox定位决定,即水平居中。
2017-11-01 11:18:57 qq_31303013 阅读数 600
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

最近开始学习React-native ,遇到底部导航  ,一直在报错误。

最后找到解决办法,快被整哭啦。。。。

  第一步 导入框架,npm install react-native-tab-navigator --save

第二步;在用到react-native-tab-navigator 的页面

import TabNavigator from 'react-native-tab-navigator';
第三步:构造方法

constructor(props) {
  super(props);
  // 初始状态
  this.state = {
      selectedTab:'home'
  };

}
第四步:

// 返回TabBarItem
renderTabBarItem(title, selectedTab, image, selectedImage, view ) {
    return(
        <TabNavigator.Item
            selected={this.state.selectedTab === selectedTab}
            title={title}
            selectedTitleStyle={{color:'black'}}
            renderIcon={() => <Image source={{uri:image}} style={styles.tabbarIconStyle} />}
            renderSelectedIcon={() => <Image source={{uri:selectedImage}} style={styles.tabbarIconStyle} />}
            onPress={() => this.setState({ selectedTab: selectedTab })}>
                {view}  //不需要用到Navigator,直接把需要的页面加进来就可以了
                      
        </TabNavigator.Item>
    );
}
第五步:
render() {
    return (
        <TabNavigator>
            {/* 首页 */}
            {this.renderTabBarItem("首页",'home','tabbar_home_30x30','tabbar_home_selected_30x30',<GDHome />)}
            {/* 海淘 */}
            {this.renderTabBarItem("海淘",'ht','tabbar_abroad_30x30','tabbar_abroad_selected_30x30',<GDHt />)}
            {/* 小时风云榜 */}
            {this.renderTabBarItem("小时风云榜",'hourlist','tabbar_rank_30x30','tabbar_rank_selected_30x30',<GDHourList/>)}
        </TabNavigator>
    );
}






2017-04-12 20:20:36 fox_wei_hlz 阅读数 333
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

今天来说一些关于React Native要做成类似安卓的Popuwindow这样效果应该怎么做。首先我们要知道一下关于React Native的写法基本上面有点像网页的类似就好像是一个box,当然今天讲解里面比较重要的是绝对定位position这个属性'absolute', 'relative'。其中absolute

<View>  //1
{
            <ListView
              //  enableEmptySections={true}
              paddingLeft={_getWidth(15)}
              paddingRight={_getWidth(15)}
              dataSource={this.state.dataSourcetwo} //数据源
              renderRow={this.renderRowCode.bind(this)} //返回具体的cell,有四个参数 => 1:一条信息 2:分组ID 3:行ID 
            >
            </ListView> 
          }
          {this.state.message.length != 0 ? this._renderLoadMore() : <View ></View>}
          {
           <View style={stylesCode.NodealGstyle}>
              <ModalG
        
              ></ModalG>
            </View> 
          }
      </View> 

 NodealGstyle: { // 2
    position: 'absolute',
    top: _getHeight(48),
    zIndex: 99999,
  },
ModalG这个是我分装的一个js类模块,然后进行调用。然后其中遇到了一个问题在没有进行分装的时候直接调用时候没有发现会遇到一个问题就是绝对失效了。这个问题就浪费我很久时间。因为在React Native里面一不小心就可能导致这个问题。而当时我也查了很多关于React Native图层的知识。事实上确实是图层的问题。然后我们先来实现一下这个东东。首先我们看到代码里面的 红色的注释1的位子。这个呢,是使得listview和我自己分装的ModalG放在同一个图层位子。然后呢我们在进行绝对定位的2 的位子我们可以看到里面的绝对定位那么这个时候如果没有进行分装的话,不用在套一个View就可以绝对定位上面。但是进行分装后为何要在进行一次绝对定位呢。因为这个时候我们的自定义的组件是相当于一个view。但是实际上面没有与listview在同一个图层的位子,反而在listview下面。那么这个时候要加一个view提升一下图层的位子。然后在设定一个state进行判断。
其中Popuwindow的代码如下:
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Dimensions,
    TouchableOpacity
} from 'react-native'
const { height, width } = Dimensions.get('window');
var styles = StyleSheet.create({
    ViewOnClickstyle: {
        width: (width - (26)) / 3,
        height: (34),
        marginTop: (16)
    },
    ViewItemstyle: {
        width: (width - (26)) / 3,
        alignItems: 'center',
        height: (34)
    },
    ViewItemOnestyle: {
        width: (82),
        height: (34),
        borderColor: '#eeeeee',
        borderRadius: 5,
        borderWidth: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    ViewAllstyle: {
        backgroundColor: 'white',
        height: (210),
        paddingLeft: 12,
        paddingRight: 12
    },
    ViewTwostyle: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    ViewBootomstyle: {
        flex: 1,
        height: (height - 43 - 210)
    },
    ViewBottomTwostyle: {
        flex: 1,
        backgroundColor: 'black',
        opacity: 0.5
    }

})
export default class Pupuwindow extends Component {

    constructor(prop) {
        super(prop);
        this.state = {
            active: 0,//表示是否点击到里面的某一个选项
        }
    }
    static propTypes = {
        callCloseOrChange: React.PropTypes.func,//第一个回调Click判断是否要进行关闭页面或者是切换页面
        callChange: React.PropTypes.func,//第二个方法是否需要进行重置选项
        switchPop: React.PropTypes.array,//传入数据判断是哪一个页面  【0,1,,2,4】例如
        data: React.PropTypes.array, //数据源
    };
    render() {
        var { itemClick, modalTwoVisible, switchPop, data, dataTwo, Click } = this.props;
        return (true ? <View style={{ flex: 1 }}>
            {
                switchPop.map((o, i) => {
                    return (
                        o === Click ? this.ViewAllTotal(data[i], i, Click, itemClick) : <View key={i} ></View>
                    )
                })
            }
        </View> : <View></View>
        )
    }

    ViewAllTotal(data, what, Click, itemClick) {
        return (
            <View key={what} style={{ flex: 1, width: width }}>
                <View style={styles.ViewAllstyle}>
                    <View style={styles.ViewTwostyle}>
                       <Text> Good job</Text>
                    </View>
                </View>
                <TouchableOpacity style={styles.ViewBootomstyle} onPress={() => this.props.callCloseOrChange(what)}>
                    <View style={styles.ViewBottomTwostyle}></View>
                </TouchableOpacity>
            </View>
        )
    }
}
//那么其中的调用是switchPop (表示多少个的选择框进行弹出Popuwindow),callCloseOrChange(这个是在外面传入的参数判断是否点击了)


然后代码就到这边祝大家好运哦~

2017-01-17 22:25:44 xiangzhihong8 阅读数 8635
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

前言

之前我们讲了很多react-native的基础控件,为了方便大家的理解,我们来对react-native的布局做一个总结,观看本节知识,你将看到。

  • 宽度单位和像素密度
  • flex的布局
  • 图片布局
  • 绝对定位和相对定位
  • padding和margin的区别和应用场合
  • 文本元素

宽度单位和像素密度

我们知道在Android中是用设备像素来作为单位的(后面又出现了百分比这么 一个概念),ios中后面也有了Auto Layout和1倍图,二倍图等概念(xib+storyboard)。然而react的宽度不支持百分比,那么React怎么提供尺寸的呢?PixelRatio,PixelRatio及像素密度,可以看看官方的介绍。

 var image = getImage({
   width: 200 * PixelRatio.get(),
   height: 100 * PixelRatio.get()
 });
 <Image source={image} style={{width: 200, height: 100}} />

flex的布局

我们知道一个div如果不设置宽度,默认的会占用100%的宽度, 为了验证100%这个问题, 做三个实验:

  1. 根节点上方一个View, 不设置宽度
  2. 固定宽度的元素上设置一个View, 不设置宽度
  3. flex的元素上放一个View宽度, 不设置宽度
 <Text style={[styles.text, styles.header]}>
      根节点上放一个元素,不设置宽度
  </Text>        

  <View style={{height: 20, backgroundColor: '#333333'}} />

  <Text style={[styles.text, styles.header]}>
      固定宽度的元素上放一个View,不设置宽度
  </Text> 

  <View style={{width: 100}}>
    <View style={{height: 20, backgroundColor: '#333333'}} />
  </View>

  <Text style={[styles.text, styles.header]}>
      flex的元素上放一个View,不设置宽度
  </Text> 

  <View style={{flexDirection: 'row'}}>
    <View style={{flex: 1}}>
      <View style={{height: 20, backgroundColor: '#333333'}} />
    </View>
    <View style={{flex: 1}}/>
  </View>

来看一下运行的结果:
这里写图片描述

水平垂直居中

css 里边经常会将一个文本或者图片水平垂直居中,如果使用过css 的flexbox当然知道使用alignItems 和 justifyContent ,那如果用React Native如何实现呢?

<Text style={[styles.text, styles.header]}>
        水平居中
    </Text>

    <View style={{height: 100, backgroundColor: '#333333', alignItems: 'center'}}>
      <View style={{backgroundColor: '#fefefe', width: 30, height: 30, borderRadius: 15}}/>
    </View>

     <Text style={[styles.text, styles.header]}>
        垂直居中
    </Text>
    <View style={{height: 100, backgroundColor: '#333333', justifyContent: 'center'}}>
      <View style={{backgroundColor: '#fefefe', width: 30, height: 30, borderRadius: 15}}/>
    </View>

    <Text style={[styles.text, styles.header]}>
        水平垂直居中
    </Text>
    <View style={{height: 100, backgroundColor: '#333333', alignItems: 'center', justifyContent: 'center'}}>
      <View style={{backgroundColor: '#fefefe', width: 30, height: 30, borderRadius: 15}}/>
    </View>

这里写图片描述

网格布局

通常页面不是很复杂的时候,我们可以使用flex布局等分做到网格,复杂的那么就要用ListView实现,或者第三方控件。

等分的网格

<View style={styles.flexContainer}>
      <View style={styles.cell}>
        <Text style={styles.welcome}>
          cell1
        </Text>
      </View>
      <View style={styles.cell}>
        <Text style={styles.welcome}>
          cell2
        </Text>
      </View>
      <View style={styles.cell}>
        <Text style={styles.welcome}>
          cell3
        </Text>
      </View>
    </View>

    styles = {
        flexContainer: {
            // 容器需要添加direction才能变成让子元素flex
            flexDirection: 'row'
        },
        cell: {
            flex: 1,
            height: 50,
            backgroundColor: '#aaaaaa'
        },
        welcome: {
            fontSize: 20,
            textAlign: 'center',
            margin: 10
        },
    }

这里写图片描述
另一种方式可以参照我之前的实现: React Native实现九宫格效果

图片布局

<Text style={styles.welcome}> 100px height </Text>
  <Image style={{height: 100}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} />

100px 高度, 可以看到图片适应100高度和全屏宽度,背景居中适应未拉伸但是被截断也就是cover。

  <Text style={styles.welcome}> 100px height with resizeMode contain </Text>
  <View style={[{flex: 1, backgroundColor: '#fe0000'}]}>
      <Image style={{flex: 1, height: 100, resizeMode: Image.resizeMode.contain}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} />
  </View>

contain 模式容器完全容纳图片,图片自适应宽高。

  <Text style={styles.welcome}> 100px height with resizeMode cover </Text>
  <View style={[{flex: 1, backgroundColor: '#fe0000'}]}>
      <Image style={{flex: 1, height: 100, resizeMode: Image.resizeMode.cover}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} />
  </View>

stretch模式图片被拉伸适应屏幕

 <Text style={styles.welcome}> set height to image container </Text>
  <View style={[{flex: 1, backgroundColor: '#fe0000', height: 100}]}>
      <Image style={{flex: 1}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} />
  </View>

绝对定位和相对定位

<View style={{flex: 1, height: 100, backgroundColor: '#333333'}}>
    <View style={[styles.circle, {position: 'absolute', top: 50, left: 180}]}>
    </View>
  </View>
  styles = {
    circle: {
    backgroundColor: '#fe0000',
    borderRadius: 10,
    width: 20,
    height: 20
    }
  }

这里写图片描述
和css的标准不同的是, 元素容器不用设置position:’absolute|relative’ 。

<View style={{flex: 1, height: 100, backgroundColor: '#333333'}}>
    <View style={[styles.circle, {position: 'relative', top: 50, left: 50, marginLeft: 50}]}>
    </View>
  </View>

padding和margin

我们知道在css中区分inline元素和block元素,既然react-native实现了一个超级小的css subset。那我们就来实验一下padding和margin在inline和非inline元素上的padding和margin的使用情况。
padding

 <Text style={[styles.text, styles.header]}>
    在正常的View上设置padding 
  </Text>

  <View style={{padding: 30, backgroundColor: '#333333'}}>
    <Text style={[styles.text, {color: '#fefefe'}]}> Text Element</Text>
  </View>

  <Text style={[styles.text, styles.header]}>
    在文本元素上设置padding
  </Text>
  <View style={{padding: 0, backgroundColor: '#333333'}}>
    <Text style={[styles.text, {backgroundColor: '#fe0000', padding: 30}]}>
      text 元素上设置paddinga
    </Text>
  </View>

这里写图片描述

margin

 <Text style={[styles.text, styles.header]}>
    在正常的View上设置margin 
  </Text>

  <View style={{backgroundColor: '#333333'}}>
    <View style={{backgroundColor: '#fefefe', width: 30, height: 30, margin: 30}}/>
  </View>

  <Text style={[styles.text, styles.header]}>
    在文本元素上设置margin
  </Text>
  <View style={{backgroundColor: '#333333'}}>
    <Text style={[styles.text, {backgroundColor: '#fe0000', margin: 30}]}>
      text 元素上设置margin
    </Text>
    <Text style={[styles.text, {backgroundColor: '#fe0000', margin: 30}]}>
      text 元素上设置margin
    </Text>
  </View>

这里写图片描述

文本元素

先看看文字有哪些支持的style属性:

 Attributes.style = {
    color string
    containerBackgroundColor string
    fontFamily string
    fontSize number
    fontStyle enum('normal', 'italic')
    fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
    lineHeight number
    textAlign enum("auto", 'left', 'right', 'center')
    writingDirection enum("auto", 'ltr', 'rtl')
  }

Text的样式继承

实际上React-native里边是没有样式继承这种说法的, 但是对于Text元素里边的Text元素是可以继承的。到底是继承的最外层的Text的值呢,还是继承父亲Text的值呢?肯定是继承父亲Text的值。

 <Text style={[styles.text, styles.header]}>
      文本样式继承
  </Text>

  <View style={{backgroundColor: '#333333', padding: 10}}>
    <Text style={{color: 'white'}}>
      <Text style={{color: 'red'}} onPress={this.onPressTitle}>
         文本元素{'\n'}
        <Text>我是white还是red呢?{'\n'} </Text>
      </Text>
      <Text>我应该是white的</Text>
    </Text>
  </View>

这里写图片描述

总结

针对上面的实例,我们做一个总结。

  • react 宽度基于pt为单位, 可以通过Dimensions 来获取宽高,PixelRatio 获取密度。
  • 基于flex的布局:
    view默认宽度为100%
    水平居中用alignItems, 垂直居中用justifyContent
    基于flex能够实现现有的网格系统需求,且网格能够各种嵌套无bug
  • 图片布局
    通过Image.resizeMode来适配图片布局,包括contain, cover, stretch 三种模式
    默认不设置模式等于cover模式
    contain模式自适应宽高,给出高度值即可
    cover铺满容器,但是会做截取
    stretch铺满容器,拉伸
  • 绝对定位和相对定位
    定位相对于父元素,父元素不用设置position也行
    padding 设置在Text元素上的时候会存在bug。所有padding变成了marginBottom

  • 文本元素
    文字必须放在Text元素里边
    Text元素可以相互嵌套,且存在样式继承关系
    numberOfLines 需要放在最外层的Text元素上,且虽然截取了文字但是还是会占用空间

2017-10-11 23:12:44 MYTLJP 阅读数 2207
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁
定位:一般父级用相对定位,子级用绝对定位
1.相对定位:position:relative
2.绝对定位:position:absolute
3.固定定位:position:fixed
默认static没有定位
偏移量:left和
top比
right和
bottom的优先级要高
相对定位
相对于自身原始位置进行定位
原点在自身左上角
不脱离文档流
特性:
1.不影响元素本身的特性
2.不使元素脱离文档流
3.提升层级
4.无法触发BFC
5.针对自己本身进行定位
绝对定位
以定位父级为原点进行定位
会脱离文档流
如果没有定位父级以document文档定位
温馨提示:绝对定位即使没有初始值,也一定要设置值
left:0px;top:0px;
特性:
1.会使元素完全脱离文档
2.内容撑开宽度和高度
3.使元素支持所有的CSS样式
4.提升层级
5.绝对定位要和相对定位配合使用
6.如果有定位父级,针对定位父级发生偏移
如果没有,针对document进行偏移
7.如果绝对定位的子级有浮动,可以省略清浮动的操作
固定定位
以窗口左上角为原点定位,定位之后相对于窗口的位置始终不变
应用场景:悬浮在网页两边的广告
脱离文档流
温馨提示:IE6不支持固定定位
特性:
1.不兼容IE6
2.针对窗口进行定位
3.如果固定定位的子级有浮动,可以省略清浮动的操作

脱离文档流的两点影响
1.后面同父级元素会顶上来
2.父级会检测不到脱离文档流的元素,从而导致父级高度无法由内容撑开


定位层级设置
z-index:数值
数值越大,层级越高
层级关系
z-index负数<正常<float(和文档同级)<position<z-index正数
注意:z-index、left、top、right、bottom只对带有position属性(static除外)的元素有效
z-index,用来提升或降低层级关系

React Native学习提纲

阅读数 283

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