感谢大家的支持!
赞助我的工作 lfx 众筹 或者说 潮汐运动。 。 。 .
任何反应- 本地支持, 请访问电子邮件( 以 24 hrs 为响应)
[email protected]
反应 - 本地读取 - 更多
反应原生库以收缩的方式显示文本并在需要时进行扩展. 可用于所有平台的本地或博览会。 支持TS/JS两种. 这是一个纯粹的JS解决方案,不需要任何本土依赖.
安装
npm i @fawazahmed/react-native-read-more --save
或者用纱线
yarn add @fawazahmed/react-native-read-more
使用量
import React from 'react';
import {SafeAreaView, StyleSheet, View} from 'react-native';
import ReadMore from '@fawazahmed/react-native-read-more';
const Home = () => {
return (
<SafeAreaView style={styles.safe}>
<View style={styles.root}>
<ReadMore numberOfLines={3} style={styles.textStyle}>
{
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
}
</ReadMore>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
safe: {
flex: 1,
},
root: {
flex: 1,
padding: 16,
},
textStyle: {
fontSize: 14,
},
});
export default Home;
道具
| Prop | 类型 | 需求 | 说明 |
|---|---|---|---|
style | object or array | 没有 | 文本样式 |
seeMoreText | string | 没有 | 默认为 See more |
seeMoreStyle | object or array | 没有 | 文本样式 See more 文本 |
seeLessText | string | 没有 | 默认为 See less |
seeLessStyle | object or array | 没有 | 文本样式 See less 文本 |
ellipsis | string | 没有 | 默认为 ... |
wrapperStyle | object or array | 没有 | 包装的样式 View |
numberOfLines | number | 没有 | 默认为 3 |
animate | bool | 没有 | 默认为 true qq应用了微妙的动画来多看少看文字,而不是完整的文字本身 |
customTextComponent | React component | 没有 | 默认为 Text |
expandOnly | bool | 没有 | 默认为 false QQ 隐藏比链接的选项少 在职 |
onExpand | func | 没有 | 扩展时执行可选召回 |
onCollapse | func | 没有 | 崩溃时执行可选召回 |
onReady | func | 没有 | 当看到更多位置测量完成时执行可选回调, 此函数将传递 2 个参数 ({ canExpand, expandedLinesCount })时 canExpand 是一个布尔指定,如果文本可以扩展并 expandedLinesCount 是一个数字,表示文本处于扩展状态时行数. |
collapsed | bool | 没有 | 控制崩溃状态程序 问题 |
debug | bool | 没有 | 要检查的打印调试日志 |
seeMoreContainerStyleSecondary | object | 没有 | 在文本重叠的情况下,通过{位置:'相对'}见 问题 (不建议) |
onSeeMore | func | 没有 | 当一个函数被传递时, 将会禁用默认值 See More toggling 并使用自定义的回调 。 在按下“ See More” 时, 做一些诸如打开一个模式而不是扩展文本之类的事是有用的 . |
onSeeLess | func | 没有 | 当一个函数被传递时, 将会禁用默认值 See Less toggling 并使用自定义的回调 。 用于打开一个模式, 而不是按下“ See Less” 键时崩溃文本 . |
任何额外的道具都会传递到下面 Text 组件.
HTML 的使用
HTML渲染不是这个软件包的一部分,但是在任意自定义的html到文本库的帮助下可以轻松完成. 样本代码请参见此 问题
运行示例
git clone https://github.com/fawaz-ahmed/react-native-read-more.git
cd react-native-read-more/example
yarn install # or npm install
# to run on iOS
yarn ios
#to run on android
yarn android
为什么还有图书馆?
此模块将计算位置 See more 财务报告和审定财务报表 See less 在同一段内,而不是使用另一行。 换成是空出 Text 组件,您可以通过配置 numberOfLines 道具 (英语). 此外,您还可以通过自己的定制执行 Text 组件类似 ParsedText (单位:千美元)样本代码页:1.
用 Jest 进行测试
确保添加 jest.useFakeTimers(); 您的测试文件.
见 堆叠流后 财务报告和审定财务报表 笑笑计时器
是否看到问题或任何反馈或特征?
创建一个 问题 和吉苏布.
解决问题
已知问题
Android only 若为 numberOfLines 值为 1 以道具形式传递,在和机器人设备中文本会在行尾重叠。 这是一个问题在 react-native 将其它行的文字拼接成第一行,即使我们添加 \n 到第一行,线条从那里返回 onTextLayout 表示不同的反应.
为了克服这个问题,请使用 numberOfLines 大于 1。 。 。 .