javascript - 如何将css应用于内部组件react-native-paper 中的组件?
问题描述
我正在研究 React Native 0.62,我在其中使用 react-native-paper 作为卡片。我在 Card.Content 组件中使用了 react-native。但用户界面并不像我想要的那样。我尝试使用嵌套组件,它可以工作,但其他 css 不会像填充等一样适用于它。感谢任何帮助。
代码:
<Card.Content style={{ paddingTop: 10 }}>
{this.props.data.getHolidays.loading ?
(<View style={{ width: 'auto', height: 175, justifyContent: 'center', alignItems: 'center' }}><ActivityIndicator color="#6CCFF6" size="large" /></View>)
:
Object.keys(this.props.data.getHolidays.holidays).length == 0 ?
(<View style={{ width: 'auto', height: 175, justifyContent: 'center', alignItems: 'center' }}><Text style={{ fontFamily: 'OpenSans-Regular', fontSize: 14, color: 'black' }}>Not Available</Text></View>) :
(
Object.keys(this.props.data.getHolidays.holidays).map(key => (
<>
<Caption style={{ fontFamily: 'OpenSans-Regular', fontSize: 14, color: '#CFCFCF', marginBottom: 10, }}>{key}</Caption >
{this.props.data.getHolidays.holidays[key].map((holidayList, index) => (
<View style={{ borderRadius: 5, backgroundColor: (index % 2 == 0) ? '#596AB2' : '#48657D', marginBottom: 10 }} key={index}>
<Text style={{ fontFamily: 'OpenSans-Regular', fontSize: 14, color: '#FFFFFF', paddingVertical: 6, paddingHorizontal: 10 }}>
{moment(holidayList.holidayDate).format('ddd')} {moment(holidayList.holidayDate).format('Do')} - {holidayList.holidayEvent}</Text>
</View>
))}
</>
))
)
}
</Card.Content>
解决方案
当您将文本放在视图中时,这与卡片样式无关,它会占用整个空间
您可以为包装视图放置一个assignSelf,这将解决您的问题。
<View
style={{
borderRadius: 5,
backgroundColor: '#48657D',
marginBottom: 10,
alignSelf:'flex-start'
}}>
<Text
style={{
fontFamily: 'OpenSans-Regular',
fontSize: 14,
color: '#FFFFFF',
paddingVertical: 6,
paddingHorizontal: 10,
}}>
{"1232"}
{"123"} -
{"Event goes here"}
</Text>
</View>
推荐阅读
- angular - 使用 Gitlab CI 创建 Angular 库并将构建文件提交到不同的 Gitlab 存储库
- ios - swift中的Paytabs sdk集成问题
- dart - Dart:从地图列表中返回字符串值
- css - 如果在 wordpress 根文件夹中构建页面,如何正确链接主题目录中的 css?
- performance-testing - Loadrunner Analysis 2020版构建610总结报告黑屏
- python - 用下划线替换括号和空格而不使用替换函数(for循环格式)
- android - 离子吐司 scss 类 - Angular - android
- geojson - 来自叙尔特岛的错误 GeoJson 多面体
- xcode - 使用下载的 pkg 文件时,xcode 命令行工具安装在哪里?
- kubernetes - 如何在 Kubernetes 中配置 Flink TaskManagers Deployment 的多个副本的静态主机名并在 Prometheus ConfigMap 中获取它?