Как импортировать и использовать этот файл в моем представлении App.js - PullRequest
Новая
       23

Как импортировать и использовать этот файл в моем представлении App.js

0 голосов
/ 03 февраля 2019

Я хочу импортировать это в представление Appjs моего собственного нативного проекта.
Я пробовал много способов, но он не работает. Я имею в виду, я хочу отобразить его в Моем представлении.Как я могу импортировать и показать этот файл в моих 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/>
            );
        }
    }

Теперь я получаю там черное пустое пространство

Ответы [ 2 ]

0 голосов
/ 03 февраля 2019

:)

Пожалуйста, попробуйте сделать следующее:

  1. открыть файл компонента AppContainer;
  2. в заголовке файла добавить import ваш BackgroundComponent компонент;
  3. и добавьте <ForwardRef/> к методу render return:
0 голосов
/ 03 февраля 2019

Вы используете экспорт по умолчанию, а не именованный, поэтому вместо 

import {ForwardRef} from "..."

вы должны написать 

import ForwardRef from "..."
...