react native 修改 react native element 组件默认样式

安装 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  属性传递给组件即可