React Native
文章平均质量分 62
使用React Native遇到的问题及笔记总结
慢吞吞的树懒
日复一日
展开
-
React Native使用FlatList组件实现水平滚动翻页
主要利用到以下二个方法:1、在一个onScrollBeginDrag回调方法(开始拖动时触发)中记录event.nativeEvent.contentOffset.x:X轴滚动的偏移量。2、在一个 onScrollEndDrag回调方法(拖动结束时触发)中记录event.nativeEvent.contentOffset.x:X轴滚动的偏移量。(1)若开始拖拽的偏移量 < 拖动.x,则表示向后翻页。(2)若开始拖拽的偏移量 >拖动.x,则表示向前翻页。利用onScroll滚动事件也可以原创 2021-01-09 12:37:06 · 2128 阅读 · 0 评论 -
React Native给多个<Text>组件添加不同的styles
问题描述遍历了多个组件,当想操作第二个的样式时,可以给每个Text组件添加一个不同的styles代码:return ( <View> { dataArray.map((item,index)=>{ return( <Text key={index} style={styles[`text${index}`]} &原创 2020-07-30 17:26:25 · 774 阅读 · 0 评论 -
react native中软键盘收起时使输入框失去焦点
问题描述:在TextInput中输入文本 ,会弹出软键盘 ,当我收回软键盘时框焦点还在这个输入框中。分析:需要监听键盘的收起事件,然后控制输入框,使输入框失去焦点代码:export default class InputItem extends Component { constructor(props) { super(props); this.inputRef = React.createRef(); } componentDidMount() { th原创 2020-07-29 10:19:21 · 1924 阅读 · 1 评论 -
React Native使用FlatList组件实现上拉加载
运行成功截图:代码如下:import React, { Component } from 'react';import { View, StyleSheet, FlatList, Text, RefreshControl, ActivityIndicator,} from 'react-native';import { thisExpression } from '@babel/types';const tempDatas = [ { color:'bl原创 2020-07-21 17:03:47 · 355 阅读 · 0 评论