React 原生背景图片 - styled-components

Question

我目前正在学习 react-native，对它很陌生。

当我放置样式组件样式时出现以下错误 background-image: url(${img});:

Invariant Violation: "backgroundImage" is not a valid style property.
StyleSheet generated: {
  "backgroundColor": "#FD5656",
  "backgroundImage": "url(undefined)"
}

谁能告诉我我做错了什么？

文件：Login.js 屏幕 - sampleApp/rn-sample-app/screens/Login.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Container, InnerContainer, ScrollArea } from './../constants/layout-styles';
import { Text, View } from 'react-native';


const Login = () => {
  return(
    <ScrollArea loginbkgrd={true}>
      <Container>
        <InnerContainer>
          <View>
            <Text>Login page</Text>
            <Text>form</Text>
          </View>
        </InnerContainer> 
      </Container>
    </ScrollArea>
  );
};

export default Login;

文件：布局样式 - sampleApp/rn-sample-app/constants/layout-styles.js

import styled from 'styled-components';
import { View, ScrollView  } from 'react-native';
import Constants from 'expo-constants';
import { colors } from './colours';
import { img } from './../assets/images/bkgrd.png';

const StatusBarHeight = Constants.statusBarHeight;

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

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

export const ScrollArea = styled.ScrollView`
  ${(props) => (props.loginbkgrd == true && `
    background-color: ${colors.primary};
    background-image: url(${img});
  `)};
`;

Answer 1

如果你想使用背景图片，你应该使用 react-native ImageBackground

<ImageBackground 
          source={{uri: 'YOUR URL HERE'}}
          style={{ flex: 1}}
        >
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Your Contents</Text>
       </View>

 </ImageBackground >

React 原生背景图片 - styled-components

React native background image - styled-components

react-native

styled-components