【实习总结】ks第二三周

vocode 配置

• Prettier + ESLint VSCode 代码格式化
  不推荐开保存自动格式化，不是所有的格式够符合要求，使用vscode的快捷方式 shift+option+F来格式化选中代码

• 模块化

//functions.js
export default function(){
	...
}

//application.js
import functions from 'functions.js';
//使用
functions()

活动海报页面的开发

• • 图片页面正常布局即可，但是图片间会有空白，是由于img标签之间的换行符，可以使用font-size=0等方式解决
• • 对于图片商的可点击区域，可以使用相对布局加上绝对布局的方式，将div标签的位置挪到图片的对应位置，然后加上onClick方法即可

	<div class='container'>
		<img src='...' alt='...' />
		<div class='button_div'></div>
	</div>

   <style>
	.container{
		position:relative;
	}

	.button_div{
		position:absolute;
		top:
		bottom:
	}
	</style>

react native中的文本溢出处理

<Text
  style = {{
  //设置显示的最大长度，这样通过调试大小可以显示相应的字数
  	maxWidth: screenSize(75),
  }}
  //文本显示行数
  numberOfLines = {1}
  //省略显示的模式，可以head middle和tail
  ellipSizeMode = 'tail'
>	
</Text>

slice方法

数组和字符串都有slice方法，用法相似
slice()没有参数的时候默认返回和原数组一样的数组
当slice只有一个参数的时候，默认该参数为start,end为最后一个元素

let b = [1,2,3,4,5,6,7,7]
b.slice(4) //显示 [5, 6, 7, 7]

b.slice(-5) //显示[4, 5, 6, 7, 7]

// slice没有指定end参数的话，那么切分的数组包含从 start 到数组结束的所有元素

react 超出规定字数外的文字以省略号形式展现

<Text
	numberOfLines = {1}
	ellipsizeMode = 'tail'
	style = {{
		maxLength = screenSize(5)
	}}
>

</Text>
//numberOfLines 控制显示的行数
//ellipsizeMode 省略号的位置：head tail ...
//Text或者父容器设置（最大）长度的时候 可以控制文本显示字数

react 图片显示

图片路径加载

• 本地资源

<Image 
   style  = {image_style}
   source = {require('./image_path')} 
   resizeMode = {"cover"|"contain"|"stretch"|"repeat"|"center"}
/>

• 网络图片资源

<Image 
   style  = {image_style}
   source={{uri: 'image_url'}
   resizeMode = {"cover"|"contain"|"stretch"|"repeat"|"center"}
/>

react Image组件

react笔记

• https://docs.qq.com/doc/DSG1jdUJtQ3FYR1V1
• https://juejin.cn/post/7015402441298411533#heading-0
• (较为详细)https://gitee.com/hongjilin/hongs-study-notes/tree/master/%E7%BC%96%E7%A8%8B_%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/React%E7%AC%94%E8%AE%B0#react%E7%AC%94%E8%AE%B0
• https://brucecai55520.gitee.io/bruceblog/notes/react/react-basic.html#react-%E7%AE%80%E4%BB%8B
• https://brucecqm.github.io/bruceblogpages/fe/react/react_for_components.html#%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%A0%B8%E5%BF%83%E5%B1%9E%E6%80%A7-state
• https://blog.csdn.net/weixin_44972008/category_11114770.html
• https://blog.csdn.net/weixin_44972008/article/details/117575262
• https://blog.csdn.net/weixin_44972008/article/details/117934928
• https://www.yuque.com/fechaichai/qeamqf/xbai87

实现方式：
https://zhuanlan.zhihu.com/p/163395554

单行文本和多行文本

单行文本：

overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;

// 多行文本
dispaly: -webkit-box
overflow: hidden;
text-overflow:ellipsis;
-webkit-box-orient:vertical;
-webkit-line-clamp: 2

css实现文本环绕
https://segmentfault.com/a/1190000021007661