如何使用 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 属性，然后为组件设置样式：

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

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

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

How to show up all title and description in List.Accordion and List.Item with react-native-paper

react-native

react-native-paper