jeton inattendu à la ligne avec <image > tag dans React natif

Question

<Image source={require('./cat.jpeg')}/> 

J'ai cette ligne dans la fonction de rendu, et quand je lance le code, je reçois une erreur inattendue à ce jeton line.How pour résoudre ce problème? L'image cat.jpeg se trouve dans le même dossier que le composant actuel.

Voici le code complet:

'use strict' 
import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Navigator, 
    Text, 
    View, 
    Image 
} from 'react-native'; 

import { Actions } from 'react-native-router-flux'; 


export default class HomeScreen extends Component{ 



    render() { 
    return (
      <View style={styles.container}> 
      <View style={styles.rowcontainer}> 
      // <Image style={{width: 50, height:50}} 
      // source={{uri: 'https://facebook.github.io/react/img/logo_small.png'}}/> 
      <Image source={require('./cat.jpeg')}/> 

      <Text onPress={Actions.MarkAttendance}style={styles.welcome}> 
      Mark Attendance 
     </Text> 


     <Text onPress={Actions.AttendanceDetails}style={styles.welcome}> 
      View Attendance 
     </Text> 

     </View> 

     <View style={styles.rowcontainer}> 

     <Text onPress={Actions.Test}style={styles.welcome}> 
      Test 
     </Text> 


     <Text onPress={Actions.NewActivation}style={styles.welcome}> 
      New Activation 
     </Text> 

     </View> 
     <View style={styles.rowcontainer}> 

     <Text onPress={Actions.PendingAttendance}style={styles.welcome}> 
      Pending Attendance 
     </Text> 


     <Text onPress={Actions.Checkout}style={styles.welcome}> 
      Checkout 
     </Text> 

     </View> 
     <View style={styles.rowcontainer}> 

     <Text onPress={Actions.Settings}style={styles.welcome}> 
      Settings 
     </Text> 

     <Text style={styles.welcome}> 
      Logout 
     </Text> 

     </View> 
     </View> 
     ) 

    } 


} 


var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    marginTop:50, 
    backgroundColor: '#FFFFFF', 
    }, 
    rowcontainer:{ 
    alignItems:'stretch', 
    flexDirection:'row', 
    justifyContent:'space-between', 
    margin: 10, 
    }, 
    welcome:{ 
    fontSize:15, 
    } 
}); 

Answer 1

Vous ne pouvez pas utiliser // pour commenter des morceaux de code à l'intérieur de votre fonction rend tout en utilisant la syntaxe comme HTML. Essayez plutôt d'envelopper tout ce que vous essayez de commenter à l'intérieur de {} et en utilisant le bloc javascript ici.
par exemple.

{/* 
    <Image 
     source=.../> 
*/}