React Native - 提供给样式表的无效道具''答案

【问题标题】：Reactive Native - Invalid prop '' supplied to StylesheetReact Native - 提供给样式表的无效道具''
【发布时间】：2021-10-20 16:53:10
【问题描述】：

我是 react-native 新手，如果提供任何帮助指导，我将不胜感激

我正在使用 styled-components 并且我试图在 default-styles.js 中调用文件 colours.js，但这会提示错误，我不确定为什么。任何建议将不胜感激 - 谢谢。

我得到的错误是：

invalid prop 'backgroundColor' supplied to 'StyleSheet generated':

以下是我的文件：

colors.js

export const Colours = {
  primary: "#fff",
  secondary: "#E5E7EB",
  teritary: "#1F2937",
  darkLight: "#9CA3AF",
  brand: 'red',
  green: '#108981',
  red: '#EF4444',
};

const {
  primary,
  secondary,
  teritary,
  darkLight,
  brand,
  green,
  red
} = Colours;

default-styles.js

import styled from 'styled-components';
import { View, Text, Image } from 'react-native';
import Constants from 'expo-constants';
import {
  primary,
  secondary,
  teritary,
  darkLight,
  brand,
  green,
  red,
} from './colours';

const StatusBarHeight = Constants.statusBarHeight;

export const Container = styled.View`
  flex: 1;
  padding: 25px;
  padding-top: ${StatusBarHeight + 10}px;
  background-color: ${primary};
`

export const InnerContainer = styled.View`
  flex: 1;
  width: 100%;
  align-items: center;
`

export const PageLogo = styled.Image`
  width: 250px;
  height: 200px;
`

export const PageTitle = styled.Text`
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  color: ${brand};
  padding: 10px;
`

Login.js

import React from 'react';
import {
  Container,
  InnerContainer,
  PageLogo,
  PageTitle,
} from './../constants/default-styles';

const Login = () => {
  return(
    <Container>
      <InnerContainer>
        <PageLogo resizeMode="cover" source={require('./../assets/images/logo.png')}/>
        <PageTitle>Sample App</PageTitle>
      </InnerContainer>
    </Container>
  );
}

export default Login;

App.js

import React from 'react';
import { Text, View } from 'react-native';
import Login from './screens/Login';

export default function App() {
  return (
    <Login/>
  );
}

错误信息：

【问题讨论】：

标签： react-native styled-components

【解决方案1】：

像这样更新你的代码：

colors.js：

export const colors = {
  primary: "#fff",
  secondary: "#E5E7EB",
  teritary: "#1F2937",
  darkLight: "#9CA3AF",
  brand: 'red',
  green: '#108981',
  red: '#EF4444',
};

像这样导出颜色并导入您的样式文件夹并通过colors.COLOR_NAME应用调用它

例如：

styles.js：

import styled from 'styled-components';
import { View, Text, Image } from 'react-native';
import Constants from 'expo-constants';
import { colors } from './colours';

const StatusBarHeight = Constants.statusBarHeight;

export const Container = styled.View`
  flex: 1;
  padding: 25px;
  padding-top: ${StatusBarHeight + 10}px;
  background-color: ${colors.primary};
`

export const InnerContainer = styled.View`
  flex: 1;
  width: 100%;
  align-items: center;
`

export const PageLogo = styled.Image`
  width: 250px;
  height: 200px;
`

export const PageTitle = styled.Text`
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  color: ${colors.brand};
  padding: 10px;
`

【讨论】：

【解决方案2】：

primary 当前未定义。您在 colours.js 中进行解构，但您没有导出它们。唯一暴露给其他模块的是Colours。

只要做：

export const {
  primary,
  secondary,
  teritary,
  darkLight,
  brand,
  green,
  red
} = Colours;

【讨论】：