探花交友项目知识点总结

探花交友项目知识点

1、父组件向子组件添加内容，可以理解为vue中的插槽

在子组件中可以通过{props.children}来进行接收父组件向子组件标签中添加的内容

2、样式的布局技巧，要是中间和左边或者右边有其余一边没有的话，可以利用一个透明度，这样可以很快的实现

3、进度条组件

在react-native-elements有个Slider组件；

4、页面中一些小组件由于在nav并没有注册过，所以不具有this.props.navigation跳转页面的功能，此时可以利用两个方法去解决，第一种是父组件传递，第二种是在当前的页面种引入以下代码即可：

import {NavigationContext} from '@react-navigation/native'
static contextType = NavigationContext;
goPage = ()=>{
this.context.navigate('TanHua')
}

5、图片左右滑动，利用组件react-native-deck-swiper

//设置用户喜欢或者不喜欢
setLike = () => {
//如何通过js的方式来swiper滑动，swiper的Ref来实现，获取到swiper的ref=》//swiperLeft()
//根据滑动的方向或者参数，来构造数据，将他们发送到后台
//先知道当前被操作的数组的元素--索引
}

6、页面跳转的时候，携带参数

this.props.navigation.navigate('页面的名称',参数)
//在所需要的页面去获取
this.props.route.params===>可以拿到

7、letterSpacing文字与文字之间的间隙

8、顶部吸附的效果

import HeaderImageScrollView from 'react-native-image-header-scroll-view';

9、点击图片放大预展，有多张图片的时候，实现滑动的效果

import ImageViewer from 'react-native-image-zoom-viewer'

10、导航栏的切换

yarn add react-native-scrollable-tab-view @react-native-community/viewpager

11、当选中时候的样式变化

<Text style={{fontSize:activeTab === i ? 26 : 20}}></Text>

12、FlatList组件

13、日期库

yarn add moment

14、分页

onEndReached = ()=>{
//判断还有没有下一页数据
//节流阀
if((this.params.page >= this.totalPages) || this.isLoading){
return ;
  }else{
  //还有下一页数据
  this.isLoading = true;
  this.params.page++;
  //重新发送请求
  this.getList();
  }
}

//获取数据的方法
getList = async ()=>{
   const res = await request.privateGet(,);
   this.setState({
     list:[...this.state,list,...res.data]
   })
   this.isLoading = false;
}

15、ui库提供了消息列表、输入视图等常用组件，支持常见的消息类型：文字、图片、语音、视频等。默认包含多套界面风格，也能根据自己的需要自定义。

（1）安装

npm i aurora-imui-react-native react-native-fs

（2）其余为所需要的配置

16、ScrollView组件

在这个组件里面有个触底属性，可以直接利用这个属性进行一些到底部请求数据或者其它的一些操作；

onScroll属性；

17、渐变组件

import LinearGradient from ‘react-native-linear-gradient’

<LinearGradient colors={['颜色1','颜色2']}
start = {{x:0,y:0}}
end = {{x:1,y:1}}
></LinearGradient >

18、选择图片（拍摄或者选择相册中）

react-native-image-picker 图片选择工具

19、ScrollView默认是上下滚动的，设置水平滚动的时候，需要添加horizontal属性；

20、输入表情功能实现

在ScrollView中想要设置里面容器的属性，需要添加contentContainerStyle

代码示例：

<ScrollView contentContainerStyle = {{flexDirection:'row',flexWrap:'wrap'}}></ScrollView>

切换：toggle

21、上传图片

//用户选择的图片
const {tmpImgList} = this.state;
const params = new FormData();
tmpImgList.forEach( v => {
   const imgObj = {
   uri:'file://' + v.path,
   name:v.fileName,
   type:'application/octet-stream'
   }
   params.append('images',imgObj);
})

22、针对于已经打开页面，不能重新触发componentDidMount，想要返回此页面的解决方案

this.props.navigation.reset({
  routes:[{name:'Tabbar',params:{pagename:'group'}] 
})

constructor(props){
super(props);
let selectedTab = 'friend';
if(this.props.route.params && this.props.route.params.pagename){
  selectedTab = this.props.route.params.pagename;
}
  this.state.selectedTab = selectedTab
}

23、正则匹配富文本内容

24、极光通讯

25、我的页面中下面图片所需要的组件

import {ListItem} from 'react-native-elements';

<ListItem leftIcon={}
//标题
title="我的动态"
//文本的颜色
titleStyle={{color:'#666'}}
//添加下边框
bottomDivider
//右边的元素
rightElement={<Image style={{}} />
//小箭头
chevron
//右边的标题
rightTitle={}
></ListItem>

26、父组件向子组件传递样式，在子组件中进行接受和结构

子组件：

<View style = {{height:40,borderRadius:20,backgroundColor:'#fff',...this.prpos.style}}>
   <TextInput 
   value={this.props.value} 
   placeholder = '搜索用户' 
   style = {{paddingLeft:30}}
   onChangeText={this.props.onchangeText}
</View>

父组件：

<SearchInput onChangeText={txt=>this.setState({txt}) value = {this.state.txt} 
style={{marginTop:10}} />

27、includes方法的使用

const list = ilist.filter( v => v.nick_name.includes(txt))

28、互相关注–喜欢–粉丝 关系

（1）当前登录用户 A

A在用户B的详情页面中 点击了‘喜欢 A=>B

（2）同时在用户B看起来A就是B的粉丝

（3）如果A喜欢了B，同时B喜欢了A，就会在互相关注页面中出现

29、用户信息上传图片所使用的第三方库

import ImagePicker from ‘react-native-image-crop-picker’;

30、输入框文本的改变方式

方式一：

通过获取到输入框的文本（state中生命变量，绑定在输入框的vale值和onChangeText）

方式二：

非受控表单的方式

change = (e) => {
 const nickname = e.nativeEvent.text;
 consoke.log(nickname)
}

IextInput 里面有个onSubmitEditing属性

31、退出登录时候的一系列操作

（1）弹出窗口询问洪湖是否确定退出

（2）确定

（3）清楚本地缓存

（4）mobx user

（5）mobx token

（6）极光执行 推出

（7）提示用户 退出成功了

（8）重新跳转到登录页面