reagieren Bildkomponente funktioniert nicht

Question

Hallo an alle ich bin neu zu reactjs, und die Entwicklung einer App und ich bekomme ein Problem beim Anzeigen von Bild mit Komponente.

Hier ist, meine App.jsx

import React from 'react'; 

class App extends React.Component { 
render() { 
    return (
    <Image 
      source={require('./AAA.jpg')} 
      style={styles.container}> 
      <Text style={styles.welcome}> 
       Welcome to React Native! 
      </Text> 
      <Text style={styles.instructions}> 
       To get started, edit index.ios.js 
      </Text> 
      <Text style={styles.instructions}> 
       Press Cmd+R to reload,{'\n'} 
       Cmd+D or shake for dev menu 
      </Text> 
      </Image> 
); 


const styles = StyleSheet.create({ 
container: { 
    flex: 1, 
    width: undefined, 
    height: undefined, 
    backgroundColor:'transparent', 
    justifyContent: 'center', 
    alignItems: 'center', 
    }, 
    }); 
} 
} 

export default App; 

und webpack.config.js ist als

var config = { 
entry: './main.js', 

output: { 
    path: __dirname +'D:\myapp', 
    filename: 'index.js', 
}, 

devServer: { 
    inline: true, 
    port: 8080 
}, 

module: { 
    loaders: [ 
    { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 

     query: { 
      presets: ['es2015', 'react'] 
     } 
    }, 
    { 
      test: /\.(ico|jpg|png|gif|eot|svg|ttf|woff|woff2|json)$/, 
      loader: 'file', 
      query: { 
       name: '[name]--[hash:8].[ext]', 
      }, 
      } 
    ] 


    } 
    } 

module.exports = config; 

in diesem webpack haben folgt i loader für JPG-Bilder hinzugefügt auch

Aber Bild ist nicht angezeigt. Ich habe nicht die Idee, was zu tun ist.

Bitte geben Sie mir die suggection tosolve mein Problem dies meine erste app ist und ich bin immer Problem

Answer 1

Sie brauchen keinen speziellen loader definieren

nur ein Bild mit HTML-Image-Tag verwenden laden

< img src="image path" height="20px" witdh="20px"/>

Es wird funktionieren, und wenn Sie ansprechende Bild wollen, dann können Sie Bootstrap-image-Tags verwenden, reagieren

Answer 2

Dont etwas webpack hinzufügen, und ur-Code zu sehen, u r Importe Verwendung import React, {Component} from 'react'; import {Image, Text, StyleSheet} from 'react-native' und erklären Sheet außerhalb Komponente fehlt.