React Native 填坑一

  • Z时代
  • 2024-01-10
  • 分类：综合

react

关于RN的布局

  1. 分为主轴和交叉轴， 主轴可以是横向也可以是竖向，交叉轴也是对应的。

  2. 主轴默认是竖向。如果要更改用flexdirection

  3. 主轴对齐方式：justifyContent

  4. 交叉轴对齐方式：alignItems

问题1. 横向排列居中对齐

要改主轴的方向

flexDirection:"row",justifyContent:"center"}

问2.水平布局并铺满的问题

要铺满用flex:1 .

如果发面没有铺满，居中显示了。有可能是设置了交叉轴的对齐方式。

检查alignItems有没有设置值。

问3.轮播图的使用。

用的是Swipper组件。需要先引用

import Swiper from 'react-native-swiper';

  1. 轮播控件如果封装成组件，如何对属性进行传值 。

autoplay={this.props.autoplay}  //组件里使用
autoplay={false}  //调用的时候这样显示 
//传自定义的属性值 
dtList={this.state.dataList} 
//接收时
 dataList={this.props.dtList} 
 //是否显示左右箭头
 showsButtons=true //默认不显示 
 //是否自动播放 
 autoplay=true
 //是否显示图片下方的小圆点
 showsPagination={false}
 //dot 
 小圆点的样式 ，里面是view包装的style .
 //activeDot
 点中的样式

npm 安装时 后面的-save参数表示什么意思

--save的作用是：配置package.json，相当于Android的gradle,我们依赖的库在node-modules,相当于Android的libs文件夹，

js中的map方法

map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值

image source的路径问题

image source的指向问题。 本地路径用require .网上的用uri

  <Image source={require("../../../Image/icon_right.png")} style={{width:20,height:20}}/>

以上是 React Native 填坑一 的全部内容， 来源链接： utcz.com/z/382522.html

回到顶部