reactjs - 如何在我的 App.js View 中导入和使用此文件

标签 reactjs react-native svg import export

我想将其导入到我的 React Native 项目的 Appjs View 中。
我尝试了很多方法,但它不起作用。我的意思是我想在我的 View 中渲染它。我如何导入并在我的 Appjs 中显示此文件。谁能帮助我,这对我来说非常重要。

这是我的代码:

import ForwardRef from '../../constants/UI_login/Home_Landing_Page/BackgroundComponent'
import React from "react";
import Svg, { Defs, LinearGradient, Stop, Rect } from "react-native-svg";
/* Adobe XD React Exporter has dropped some elements not supported by react-native-svg: style */

const BackgroundComponent = ({ svgRef }) => (
  <Svg width={375} height={247} viewBox="0 0 375 247" ref={svgRef}>
    <Defs>
      <LinearGradient
        id="a"
        x1={0.5}
        y1={0.807}
        x2={0.5}
        y2={1}
        gradientUnits="objectBoundingBox"
      >
        <Stop offset={0} stopColor="#fff" />
        <Stop offset={1} stopColor="#fff" stopOpacity={0} />
      </LinearGradient>
    </Defs>
    <Rect className="a" width={375} height={247} />
  </Svg>
);

const ForwardRef = React.forwardRef((props, ref) => (
  <BackgroundComponent svgRef={ref} {...props} />
));
export default ForwardRef;

App.js

import React from 'react';
import { StyleSheet} from 'react-native';
//import {Actions} from 'react-native-router-flux';
import Routes from './components/Routes';
import {firebaseConfig} from "./constants/ApiKeys";
import ForwardRef from '../../constants/UI_login/Home_Landing_Page/BottomNavigationComponent'

import {AppContainer} from './components/Navigation'

import * as firebase from 'firebase';

    if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig); }

    console.ignoredYellowBox = ['Setting a timer'];
    export default class App extends React.Component {

        render() {
            return (
                <AppContainer/>
                <ForwardRef/>
            );
        }
    }

现在我在那里得到一个黑色的空白

最佳答案

您使用的是默认导出而不是命名导出,因此不要使用

import {ForwardRef} from "..."

你必须写

import ForwardRef from "..."

关于reactjs - 如何在我的 App.js View 中导入和使用此文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54502634/

相关文章:

javascript - react-syntax-highlighter 不是美化代码?

javascript - Grunt-Browserify 忽略选项

javascript - 如何在 React Native 中使用 .reduce() 修改内部状态?

javascript - D3 外部数据的路径未出现

javascript - 如何使用 AMPLE SDK 缩放和平移嵌入 XHTML 页面的 SVG 文档

javascript - 访问 SyntheticEvent 目标上的 currentTime

javascript - react-i18next: 在文本中间插入 HTML 标签中的链接

svg - 如何使 Highcharts SVG 时钟的背景透明?

javascript - React Native App 在一周内死掉(初始错误)

javascript - React Native 在按钮单击时将文本添加到 TextInput