Question

我正在使用react-native-paper开发移动应用，并且在List中使用react-native-paper。

我想在List上显示整个消息。默认情况下，如果消息太长（如下面的gif），List将忽略消息的一部分。

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>

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

如何使用react-native-paper

2 个答案: