在 React Native Elements ListItem Buttons 周围填充（根据文档）答案

【问题标题】：Padding around React Native Elements ListItem Buttons (per documentation)在 React Native Elements ListItem Buttons 周围填充（根据文档）
【发布时间】：2019-04-21 19:09:17
【问题描述】：

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

但是，当我尝试执行以下操作（直接从文档中）时，它不会产生相同的样式：

<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 组件的样式以匹配此样式？

【问题讨论】：

标签： javascript react-native react-native-elements

【解决方案1】：

根据 React Native Elements 文档 - https://react-native-training.github.io/react-native-elements/docs/customization.html#component-styles - 所有组件都可以使用 containerStyle 属性单独设置样式。

以下作为道具添加到 ListItem 中，实现了上述要求：

containerStyle = {{ marginLeft: 5,
                    marginRight: 5, 
                    marginTop: 10, 
                    borderRadius: 10, // adds the rounded corners
                    backgroundColor: '#fff' }}

【讨论】：