首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >反应本机元素ListItem按钮的填充(每个文档)

反应本机元素ListItem按钮的填充(每个文档)
EN

Stack Overflow用户
提问于 2019-04-21 19:09:17
回答 1查看 3.9K关注 0票数 0

在(https://react-native-training.github.io/react-native-elements/docs/listitem.html#linear-gradient-scale-feedback)文档中,ListItem的按钮在它们之间填充,并且是圆形的。

但是,当我尝试执行以下操作(直接从文档中)时,它不会产生相同的样式:

代码语言:javascript
复制
<ListItem
  Component={TouchableScale}
  friction={90} //
  tension={100} // These props are passed to the parent component (here TouchableScale)
  activeScale={0.95} //
  linearGradientProps={{
    colors: ['#FF9800', '#F44336'],
    start: [1, 0],
    end: [0.2, 0],
  }}
  ViewComponent={LinearGradient} // Only if no expo
  leftAvatar={{ rounded: true, source: { uri: avatar_url } }}
  title="Chris Jackson"
  titleStyle={{ color: 'white', fontWeight: 'bold' }}
  subtitleStyle={{ color: 'white' }}
  subtitle="Vice Chairman"
  chevronColor="white"
  chevron
/>

此外,我已经尝试添加垫和分隔道具,但这不产生正确的外观。

一个单独的ListItem组件将如何与此样式相匹配?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-21 19:50:41

根据文档-- containerStyle --所有组件都可以单独使用https://react-native-training.github.io/react-native-elements/docs/customization.html#component-styles支柱进行样式设计。

在ListItem中作为支柱添加了以下内容,实现了上述要求:

代码语言:javascript
复制
containerStyle = {{ marginLeft: 5,
                    marginRight: 5, 
                    marginTop: 10, 
                    borderRadius: 10, // adds the rounded corners
                    backgroundColor: '#fff' }}
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55785868

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档