Проблема с подключением внешних файлов к App.js в react native

#javascript #reactjs #react-native #expo #react-props

#javascript #reactjs #react-native #выставка #react-props

Вопрос:

Я новичок в react native и испытываю трудности с подключением отдельных файлов к моему App.js . У меня есть пользовательский компонент в отдельном файле. Это то, что я сейчас в app.js

 import React from 'react';
import TextImg from "./components/comp";
import { StyleSheet, Text, View, Image } from 'react-native';

  export default function App() {
    return (
        <View style={{alignItems:'center', top:150}}>
          <Image source={require('./images/pic.jpeg')} style={{ width: 290, height: 190 }}/>
          <TextImg text='Mt. Fuji'/>
          <TextImg source={{imageUri: 'https://reactjs.org/logo-og.png'}} style={{width: 400, height: 400}} />
        </View> );
};

Я импортирую компоненты из comp.js , и это то, что у меня есть в comp.js файл

 import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
function TextImg(textprop, imgprop) {
    return (
        <React.Fragment>
          <Text>{textprop.text}</Text>
          <Image source={imgprop.imageUri}></Image>
        </React.Fragment>
    );
};

Но при этом отображается только текст, но не изображение. Кто-нибудь может помочь с этим?
Заранее спасибо за помощь!

Ответ №1:

Все ваши реквизиты будут переданы как один параметр. Поэтому вам следует изменить свой компонент, как показано ниже.

 import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

export default function TextImg(props) {
    return (
        <React.Fragment>
          <Text>{props.text}</Text>
          <Image source={props.imageUri} style={props.style}></Image>
        </React.Fragment>
    );
};

Вам придется импортировать его в свой app.js . (Предполагая, что ваше имя файла TextImg.js и это в том же направлении)

 import TextImg from './TextImg'

1. Привет, я пробовал это, но я получаю сообщение об ошибке, в котором говорится: «Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен». Правильно ли я экспортирую свой компонент в app.js ?

2. Я думал, что вы справились с частью экспорта, я обновлю ответ

3. О нет, я не делал этого раньше, поэтому я не был уверен, правильно ли я это сделал. Большое спасибо!

4. Обновлен ответ, можете ли вы попробовать сейчас

5. @Ishasharmax вы можете проверить эту ссылку create-react-app.dev/docs/importing-a-component

Ответ №2:

Вы неправильно передаете свои реквизиты.

Вот обновление вашего кода, но надлежащим образом:

 import React from 'react';
import { TextImg } from "./components/comp";
import { StyleSheet, Text, View, Image } from 'react-native';

  export default function App() {
    return (
        <View style={{alignItems:'center', top:150}}>
          <Image source={require('./images/pic.jpeg')} style={{ width: 290, height: 190 }}/>
          <TextImg text='Mt. Fuji' imageUri: {'https://reactjs.org/logo-og.png'} />
        </View> );
};

Затем в comp.js

 import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
export const TextImg = ({ text, imageUri }) => {
    return (
        <React.Fragment>
          <Text>{text}</Text>
          <Image source={imageUri} style={{width: 400, height: 400}} />
        </React.Fragment>
    );
};

Это исправит это для вас. Изучите код и попытайтесь понять, что было сделано. Но я также посоветую вам узнать о React props.

1. Привет, я это сделал, я получаю текст, но не могу отобразить изображение. Стиль будет одним из реквизитов?

2. Я допустил ошибку там @Ishasharmax, тег изображения в comp.js должно быть самозакрывающимся. И стиль должен быть на изображении в comp.js не в теге TextImg в App.js , или вы можете просто передать его в качестве реквизита. Надеюсь, это помогло вам?