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

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-guidelines

Answer 2

如果你想控制列表标题的整个样式，甚至列表项的标题就是将一个组件传递给title prop，然后设置该组件的样式：

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

然后，您可以设置View & Text组件的样式