javascript - 在 React Native Elements ListItem Buttons 周围填充(根据文档)
问题描述
在 ListItem 的 React Native Elements 文档(https://react-native-training.github.io/react-native-elements/docs/listitem.html#linear-gradient-scale-feedback)中, 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 组件设置样式以匹配此样式?
解决方案
根据 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' }}
推荐阅读
- php - 如何在 Laravel array_map 和 link_to_route 函数中使用 FontAwesome 图标
- c# - 使用自动映射器从键值对映射值
- c++ - 如何在用户模式进程中从内核模式更改页面保护
- twilio - 在 Twilio 函数中检索置信度分数?
- xpath - 使用 XPATH 从 div 内部获取值
- sql - 如何在 SQL 中进行 Contains(Description, 'a') 搜索,例如 Like'%a%'
- react-native - 如何在 Android 上的 react-native 应用程序上删除白色闪烁?
- node.js - 向特定用户发送消息?
- python - 使用 Python 请求填写网站表单
- android - 在leanback GridLayoutManager中找到第一个可见位置