React Native使用Styled-components时自定义View组件样式不生效如何解决

React 框架有强制约定：自定义组件必须以大写字母开头。小写开头的标签会被 React 默认判定为平台原生内置元素，而 React Native 环境没有原生的div元素，因此你定义的小写div组件不会被识别调用，自然出现组件未使用、样式不生效的问题。

将你定义的自定义组件名改为大写开头即可，修改后的代码如下：

import { Text, View } from 'react-native';
import styled from 'styled-components/native';

// 组件名改为大写开头的Div
const Div = styled.View`
  flex: 1; 
  justify-content: center; 
  align-items: center; 
  background-color: pink; 
`

function ScreenTimePage() {
  return (
    <Div>
      <Text> Some Text </Text>
    </Div>
  );
}

修改后重新运行项目，即可看到对应样式生效。

内容的提问来源于stack exchange，提问作者Royal