Question

我正在使用React Native构建应用程序，并且正在尝试更改第三方组件的样式。

这是来自React-Native-Elements https://react-native-training.github.io/react-native-elements/docs/lists.html

的列表组件

文档声明该组件具有＆＃39; containerStyle＆＃39;有各种造型。

如何覆盖此道具？

我正在尝试将marginTop prop更改为0（根据文档，当前设置为20）。

    return (
     <List style={styles.containerStyle}>
       {
         list.map((item, i) => (
           <ListItem
             key={i}
             title={item.title}
             leftIcon={{ name: item.icon }}
           />
         ))
       }
     </List>
   );
   };

   const styles = StyleSheet.create({
     containerStyle: {
       marginTop: 0
     }
   });

Answer 1

当您传递样式属性时，List组件有一个名为 containerStyle 的属性。

使用它传递的正确方法：

containerStyle={styles.containerStyle}

Answer 2

使用样式组件！

import styled from 'styled-component

然后你使用：

const StyleList = styled(List)`
     margin-top: 0;
`;

您的退货而不是List使用StyledList

React Native：更改第三方组件的样式支柱

2 个答案: