在 React Native 中将外部文件连接到 App.js 时遇到问题

Question

I'm super new to react native & having a hard time connecting separate files with my App.js. I've got a user-defined component in a separate file. This is what I've right now in the 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> );
};

I am importing components from comp.js, and this is what I've in the comp.js file

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>
    );
};

But this only shows the text, but not the image. Can anyone help with this? Thanks in advance for help!

Answer 1

All your props would be passed as a single parameter. So you should change your component like below.

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>
    );
};

You will have to import it in your app.js. (Assuming your file name is TextImg.js and its in the same path)

import TextImg from './TextImg'

Answer 2

You are not passing your props correctly.

Here is a revamp of your code, but in the proper way:

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> );
};

Then in 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>
    );
};

This will fix it up for you. Study the code and try to understand what was done. But I'll also advise you to learn about React props.