安装 react native element
我看很多人的文章安装的不是稳定版的,也都没有去教怎么去修改
npm install @rneui/themed @rneui/base
// 页面中引入 ListItem 组件
import {ListItem} from '@rneui/themed';
import React, {useEffect, useState} from 'react';
import {View, Text, Alert, StyleSheet} from 'react-native';
// 引入 组件
import {ListItem} from '@rneui/themed';
const ListItem = () => {
return (
<>
// 使用组件
<ListItem>
<ListItem.Content>
<ListItem.Title>Inbox</ListItem.Title>
</ListItem.Content>
</ListItem>
</>
)
}
export default ListItem ;
这个 ListItem 组件 默认是白色背景 没有圆角的 我们修改成红色背景增加圆角
import React, {useEffect, useState} from 'react';
import {View, Text, Alert, StyleSheet} from 'react-native';
// 引入 组件
import {ListItem} from '@rneui/themed';
const ListItem = () => {
return (
<>
// 使用组件
<ListItem containerStyle={styles.list}>
<ListItem.Content>
<ListItem.Title>Inbox</ListItem.Title>
</ListItem.Content>
</ListItem>
</>
)
}
const styles = StyleSheet.create({
list:{
width:'80%',
backgroundColor:'red',
borderRadius:20,
marginHorizontal:40,
marginTop:20,
paddingHorizontal:10,
}
});
export default ListItem ;
我们将自定义样式通过 containerStyle 属性传递给组件即可