react-native 记录

最新推荐文章于 2024-05-23 09:31:25 发布

七元八角oooo

最新推荐文章于 2024-05-23 09:31:25 发布

阅读量436

点赞数 1

分类专栏：进阶学习文章标签： react 组件

本文链接：https://blog.csdn.net/weixin_41892205/article/details/89648579

版权

进阶学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

react 冲鸭！

1. 子组件传递方法并带上参数

父组件单独写：

<div onClick={this.handleItemDelete.bind(this,index)}> </div>

父子组件写法
父组件：

 	constructor(props) {
     	super(props)
     	this.handleItemDelete = this.handleItemDelete.bind(this);
 	}
 	render() {
 		return (
 			<ListUI handleItemDelete  = {this.handleItemDelete } />
 	  )
 	  handleItemDelete (index) {
 	  	console.log(index)
	  }
 	}

子组件：需要使用箭头函数，保证this指向的正确。

	<div onClick = {()=> {this.props.handleItemDelete (index)}></div>

2. 设置虚线

直接设置某个方向上的虚线，在安卓机上是不生效的。兼容性处理：虚线dashed属性
代码：

lineOne:{
   width:25,
   height:0,
   borderWidth:0.8,
   borderColor:'red',
   borderStyle:'dashed',
   borderRadius:0.1,
}

重点: borderRadius设置成0.1

3. input 输入在其他平台也能正常显示布局

在react-native 中的input框中输入的文字如果带有换行、空格，在Text 标签中是可以正常显示的，没啥问题。但是想在微信小程序中也显示这部分内容，则只是显示没有换行、没有空格的纯文本：
所以需要添加样式：

  	{ white-space: pre-wrap}

保留空白符序列，但是正常地进行换行。

4 . 页面中弹窗也需要滚动时

react-native 同一页面有且只有一个地方可以实现滚动。

react-native 中同一页面，有多个<ScrollView>滚动时，会发现只能实现一个地方的滚动，这个时候需要通过禁用第一个<ScrollView>的scrollEnabled属性，启用第二个<ScrollView>的滚动就能实现弹窗的滚动了。

5. 使用FlatList安卓机有时无法显示内容

给FlatList设置一个高度。

6. 设置导航栏的点击事件

导航栏使用：

 const {params = {} } = navigation.state;
 const { setShareMenuRef = ()=>{}} = params;

定义：在组件创建时componentDidMount，设置方法:

 this.props.navigation.setParams({handleShareMenu: this.handleShareMenu})


handleShareMenu = () => {
	console.log("handleShareMenu方法的定义事件")
 }

7. 设置导航栏返回的文本

是在上一个页面设置该页面显示的返回文本内容。

8 . FlatList 滚动多次触发的问题

flatlist 在滚动的时候会触发两次

<FlatList
  onEndReachedThreshold={0.2}
  onEndReached={()=> {
  	// 延迟是为了确保开始滚动动作在前 能够顺利加载
	setTimeout(()=>{
		if (this.canAction) {
			this.canAction = false
			this.loadData() // 加载数据
		}
	},100)
  }}
  // 开始滚动时 只允许加载一次
  onMomentumScrollBegin={() => {
    this.canAction = true;
  }}
/>