在大文本的第三行末尾添加更多读取按钮
在React-Native应用程序上工作，我有一个具有文本的组件，在文本的末尾，您可以单击“阅读更多”，然后转到另一个屏幕。即使文本不超过3行，我也必须在最后显示更多阅读。这就是我到目前为止的：
const ShowReadMore = () => {
const SOME_LONG_TEXT_BLOCK =
'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.';
return (
<View style={{flexDirection: 'row'}}>
<Text numberOfLines={3} style={{flex: 1, alignItems: 'center'}}>
{SOME_LONG_TEXT_BLOCK}
</Text>
<Text onPress={() => navigationRef.navigate('somepage')} style={{alignSelf: 'flex-end'}}>
Read More
</Text>
</View>
);
};
它给了我：
我想在句子的末尾看到“阅读更多”。如果只有1行的文本效果很好，但是超过2行，我将始终有前2行右侧的一些空空间，我该如何用类似的文本填充：
working on a react-native app, I have a component that has text and at the end of the text you can click on read more, to go to another screen. Even if the text is not more than 3 lines I have to show read more at the end. This is what I have so far:
const ShowReadMore = () => {
const SOME_LONG_TEXT_BLOCK =
'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.';
return (
<View style={{flexDirection: 'row'}}>
<Text numberOfLines={3} style={{flex: 1, alignItems: 'center'}}>
{SOME_LONG_TEXT_BLOCK}
</Text>
<Text onPress={() => navigationRef.navigate('somepage')} style={{alignSelf: 'flex-end'}}>
Read More
</Text>
</View>
);
};
and it gives me this:
It's not exactly what I want, I want the text to be a of full length for the first 2 lines, and then on the 3rd line I want to see the 'read more' at the end of the sentences. If there is only 1 line of text it works good but more than 2 lines, I will always have for the first 2 lines some empty spaces on the right, how can I fill that with the text like:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以尝试将
视图替换为text）;
您可能需要
查看在外面作为容器You can try to replace
ViewtoText);
You might need
Viewoutside as a container您是否试图将
＆lt; text＆gt;这样：然后，修改您的样式以实现想要的要素。
Have you tried to put
<Text>like this:Then, modify your style to achieve want you want.
要删除空白，您可以从视图中删除此属性
style = {{flexDirection：'row'}}。To remove the white space you can remove this property
style={{flexDirection: 'row'}}from the view.