react-native绝对元素居中

于 2021-08-10 16:38:10 发布
阅读量470 收藏
点赞数
分类专栏： 笔记 文章标签： react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26889291/article/details/119573295
版权

下面是子元素样式，父元素设置position relative，以及固定宽高
水平居中

    position:'absolute',
    top:-10,
    height: 40,
    marginLeft:-110,//值为width一半
    width:220,
    left:'50%',在这里插入代码片

水平居中垂直居中

    position:'absolute',
    top:-10,
    height: 40,
    marginLeft:-110,//值为width一半
    marginTop:-20,//值为height一半
    top:50%,
    width:220,
    left:'50%',在这里插入代码片
实践是最好的老师
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解react native布局（一）居中
xsgkaka的专栏
12-27 2万+
刚刚做完了一个项目，基本上把react native各种布局方式都用上了，发现了很多坑，也学会和很多，这里给大家分享一下哈。 首先我们要有个概念：react native里面是兼容大部分我们在css里面用到的布局方式，此外接触过css里面flex布局方式的话，我们会发现react native内的flex布局方式基本上和 css里的flex布局方式类似，所以不要觉得react native
ReactNative 如何让绝对定位的元素 居中 显示
闫瑞锋的博客
10-12 4834
下列代码就是让ReactNative 绝对定位元素居中显示 <View style={{position:'absolute',right:0,left:0,top:0,bottom:0,justifyContent:'center',flexDirection:'row'}}> <Image source={require('../....
React Native中View绝对定位absolute居中问题
peach
02-02 1万+
让一个view垂直居中 position: 'absolute', right:0, marginBottom: "auto", marginTop:"auto", height:300， 垂直居中要给height 同理水平居中,固定的width position: 'absolute', right:0, marginLeft:
React Native中如何快速使一个元素相对屏幕水平居中，垂直居中
one_four_two的博客
01-28 7235
alignItems:决定其子元素沿着侧轴(次轴)的排列方式 justifyContent:决定其子元素沿着主轴的排列方式 width和height:react native指定宽高，其值不能带有单位，纯数字 实现效果如下——使元素相对屏幕水平居中，垂直居中： 代码： import React from 'react' import {ActivityIndicator, StyleSheet,...
react-native---rn中如何让组件居中定位，loading如何向H5中fixed绝对居中定位
Wbiokr的博客
04-19 1万+
rn中没有fixed定位，更没有100%宽高； 我们可以Dimensions以及flex布局进行居中设置。。。 //1. 把要居中定位的组件用view包起来(下面的样式便是针对外层view所写)； //2. 使用时候，将整个组件放在所有使用页面根组件下； //如： 水平居中： width:Dimensions.get('window').width, //窗口宽度 justifyC...
React-Native 组件之 Modal的使用详解
08-29
React-Native 组件之 Modal 的使用详解 Modal 组件是 React-Native 中一个非常重要的组件，它可以用来覆盖包含 React Native 根视图的原生视图（如 UIViewController，Activity），用它可以实现遮罩的效果。在实际...
react-native-pure-navigation-bar:React Native中完全可定制的导航栏
05-17
字符串，数字或react元素的按钮类型。 带有图像或文本的“返回”按钮。 在每个视图中全局定制样式。 屏幕截图 iPhone X 安卓 安装 通过纱线安装： yarn add react-native-pure-navigation-bar 通过NPM安装：...
react-native-knowledge:关于本机的摘要
05-01
react-native 相关知识后面简称 RN。实现Toast或Dialog在css里面，实现方式：各种postion定位z-index设置成最大top，left各50%margin-left, margin-top设置成宽高的一半（如果元素宽高不定，可以使用transform: ...
react-native动态切换tab组件的方法
08-27
React Native 动态切换 Tab 组件的方法 在 React Native 中，动态切换 Tab 组件是一种非常常见的交互方式。这种方式可以让用户在不同的 Tab 之间进行切换，提高了用户体验度。在这篇文章中，我们将介绍 React ...
react-native-maps-boilerplate
05-10
该项目旨在使其他人更轻松地创建自己的react-native-maps应用程序。 目前正在进行一项工作，但如果有帮助，请随意使用我到目前为止所拥有的任何东西：） 基本特征 准系统的有状态登录屏幕已连接以响应redux（提交将...
RN中布局方式FlexBox、absolute
zcmain的专栏
04-26 1243
FlexBox 布局基本用法 1、什么是FlexBox Flexbox是Flexible Box的缩写，意为'弹性布局'，它为盒状模型提供了很大的灵活性，让任何一个容器都可以指定为Flex布局 任何一个容器都可以指定为Flex布局 2、基本概念和属性 使用Flex布局的元素，称为Flex容器（flex Container），简称'容器'。它的所有子元素自动成为容器的成员，称为Fle...
React Native布局详细指南
fengyuzhengfan的专栏
08-01 1万+
本文出自《React Native学习笔记》系列文章。一款好的APP离不了一个漂亮的布局，本文章将向大家分享React Native中的布局方式FlexBox。 在React Native中布局采用的是FleBox(弹性框)进行布局。 FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS3弹性框布局规范，目前还处于最终征求意见稿 (Last Call Working
让元素水平垂直居中的四种方法
热门推荐
杏子
06-12 2万+
让元素水平垂直居中的3种方法前言一、使用弹性布局二、使用 transform三、使用绝对定位四、总结 前言 让元素水平居中有很多方法，比如设置 text-align:center；比如设置margin:auto再比如使用弹性布局，display:flex，justify-content:center。但是让元素垂直居中，或者是水平垂直居中却不是那么容易，今天就给大家分享一下3种让元素水平垂直居中的...
react native 中的居中问题
AC的博客
04-13 7551
常规方法遇到的问题：中间文字不能居中。我本意是想自己写一个标题栏，中间是文字，右边是图标，左边没有内容。常规想法是写一个View做标题栏的容器，里面有一个文本控件，一个图片控件，再对相应的控件做居中和向右对齐，但是在相对布局中发现没有这种属性可以支持。   常规方法还是一个容器组件中有一个空View组件为占位视图，一个文本控件，一个图片控件，再在容器组件中使用样式justifyContent为sp...
android设置文字垂直居中_React Native Text 垂直居中问题
weixin_39597868的博客
12-19 708
Text 垂直居中问题最近发现 React Native (以下称RN)里，<Text> 的 文字垂直居中 ，有很多小问题，有必要总结一下。提前说明下，这里使用的 RN 版本是： 0.57提前说明下，这里使用的 RN 版本是： 0.57提前说明下，这里使用的 RN 版本是： 0.57通常在 web/html/css 开发中，单行文字 垂直居中，一般都可以通过 height == lin...
React Native 中的 Flex Box 的用法（水平布局、垂直布局、水平居中、垂直居中、居中布局）
villen的博客
06-13 1万+
布局源码 import React, { Component } from 'react'; import { Platform, StyleSheet, View, Image, } from 'react-native'; const instructions = Platform.select({ ios: 'Press Cmd+R to reload,\n' + ...
RN flex布局和absolute 布局实践
Coding_Physical的专栏
05-26 860
代码如下: return ( <View style={{height:200,backgroundColor:'#11D38B',alignItems:'center'}}> <View style={{height:86,marginTop:120,width:global.width,backgroundColor:'#FFFFFF'}}> </View> {/* 中间那一块是绝对布局 */} <View style={[{f...
react-native图片缩放组件
最新发布
05-22
React Native提供了一些用于缩放图片的组件，其中之一是`react-native-safe-area-context`库中的`SafeAreaImage`组件。这个组件可以帮助你在设备边缘安全区域内展示图片，并允许你进行缩放操作。 要使用`SafeAreaImage`组件进行图片缩放，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了`react-native-safe-area-context`库。你可以使用npm或yarn进行安装： ```bash npm install react-native-safe-area-context ``` 或 ```bash yarn add react-native-safe-area-context ``` 2. 在你的React Native应用程序中引入`SafeAreaImage`组件： ```javascript import SafeAreaImage from 'react-native-safe-area-context'; ``` 3. 在需要展示缩放图片的组件中使用`SafeAreaImage`组件，并设置相关属性。例如，你可以使用`style`属性设置图片的尺寸和位置，使用`resizeMode`属性设置图片的缩放模式，以及使用`source`属性设置图片的来源。 ```javascript <SafeAreaImage style={{ width: 200, height: 200 }} resizeMode="center" source={require('./path/to/your/image.png')} /> ``` 在上面的示例中，我们设置了图片的宽度和高度为200像素，并使用`resizeMode="center"`将图片居中显示。我们还通过`source`属性指定了图片的来源路径。 需要注意的是，上述示例中的路径是一个相对路径，你需要根据实际情况修改为你的图片文件的实际路径。另外，你还可以根据需要设置其他样式和属性来定制缩放图片的外观和行为。 除了`react-native-safe-area-context`库提供的`SafeAreaImage`组件，React Native还提供了其他一些用于缩放图片的组件和第三方库，如`react-native-responsive-image`、`react-native-safe-area-image`等。你可以根据需要选择适合你的库或组件来进行图片缩放操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值