如何在List.Accordion和List.item中使用react-native-paper显示所有标题和描述

Question

我正在开发一个带有react-native-paper的移动应用程序，并且我在react-native-paper中使用List。

我想在List上显示整个消息. 默认情况下，如果消息太长，List会省略消息的一部分，如下面的 gif 所示。

https://gyazo.com/d60defc5f46b51408d68e793f9365172

我已经尝试更改titleEllipsizeMode的参数(头部、中间、尾部和剪辑)。 但是，这些参数没有像我预期的那样工作。

这是我的代码。

<List.Section theme={{ colors: { primary: 'black' }}}>
<List.Accordion
title='Loooooooooooooooooooooooooooong title title title'
expanded={this.state.expanded}
onPress={this._handlePress}
>
<List.Item
title='Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title title title'
expanded={this.state.expanded}
titleEllipsizeMode='tail'
titleStyle={{ fontSize: 10 }}
/>
</List.Accordion>
</List.Section>

Answer 1

首先，列表标题不应该太长，因为它违反了设计准则。 通常，如果您需要有一个潜台词，那么它会在它下面移动，如下图所示。 Gmail 指南

Answer 2

如果您想控制列表标题甚至列表项标题的整个样式，请将组件传递给标题道具，然后设置组件样式：

<List.Accordion title={<View><Text>Accordion title</Text></View>}>
<List.Item title="item title"/>
</List.Accordion>

然后，您可以设置视图和文本组件的样式