如何让 React Native 代码在 Visual Studio 中工作

Question

*****I ran this react native code in expo .snack and the code ran flawlessly but when i run it in visual studio code to my iPhone it dosent seem to work here is the error get is there anything i can do to get the code to work.**

unexpected token 42:2

here is the code im running for the app***

import React, { Component } from 'react';

import { StyleSheet, Text, View, Image,ImageBackground,button,  
TouchableOpacity, Dimensions,Button} from 'react-native';

const width = Dimensions.get('window').width; 
const height = Dimensions.get('window').height;



export default class App extends Component {
  render() {
   return (
     <View style={{flexDirection: "row"}}>
       <ImageBackground source={{uri: 'https://lumiere-a.akamaihd.net/v1/images/usa_avengers_sb_bkgd8_1024_0ae5b001.jpeg?region=0%2C0%2C1024%2C576'}}
         style={{width: width, height: height,flexDirection:'colum'}}> 
           <TouchableOpacity style={styles.spiderman}>
              <Image source={{uri: 'http://www.pngmart.com/files/2/Spider-Man-Transparent-Background.png'}}
              style={{width: 200, height:300,}} />
           </TouchableOpacity>
           <TouchableOpacity style={styles.hulk}>
              <Image source={{uri:
                 'https://vignette.wikia.nocookie.net/avengers-assemble/images/d/d6/Usa_avengers_skchi_blackwidow_n_6e8100ad.png/revision/latest/scale-to-width-down/449?cb=20170426073401'}}
                 style={{width: 150, height: 80, position:'top',}} />
           </TouchableOpacity>
           <TouchableOpacity style={styles.blkwidow}>
              <Image source={{uri: 'https://clipart.info/images/ccovers/1516942387Hulk-Png-Cartoon.png'}}
                  style={{width: 200, height: 250}} />
            </TouchableOpacity>

        </ImageBackground>
      </View>
  );
 }
}
///need help with coloring each icon
const styles = StyleSheet.create({
  spiderman: {
flex: 1,
position:'left',
alignItems: 'flex-end',
justifyContent: 'center',
width: 50,
height: 500,
bottom: -140,
left: Dimensions.get('window').width -10,
zIndex: 10,
  },
  blkwidow: {
flex: 1,
position:'left',
alignItems: 'flex-end',
justifyContent: 'flex-end',
width: 50,
height: 50,
bottom: 50,
left: Dimensions.get('window').width - 70,
zIndex: 10,
  },
});

Answer 1

Your code needs to be reviewed. I have corrected the errors. See the code.

import React, {Component} from 'react';

import {
StyleSheet,
Text,
View,
Image,
ImageBackground,
//button - Not a component of react-native
TouchableOpacity,
Dimensions,
Button
} from 'react-native';

const width = Dimensions
.get('window')
.width;
const height = Dimensions
.get('window')
.height;

export default class App extends Component {
render() {
    return (
        <View style={{
            flexDirection: "row"
        }}>

            <ImageBackground
                source=
                { { uri: 'https://lumiere-a.akamaihd.net/v1/images/usa_avengers_sb_bkgd8_1024_0ae5b001.jpeg?region=0%2C0%2C1024%2C576' } }
                style={{
                width: width,
                height: height,
                flexDirection: 'column'
            }}>

                <TouchableOpacity >
                    <Image
                        style={{
                        width: 200,
                        height: 200
                    }}
                        source={{
                            uri: 'http://www.pngmart.com/files/2/Spider-Man-Transparent-Background.png'
                    }}/>

                </TouchableOpacity>

                <TouchableOpacity >
                    <Image
                        style={{
                        width: 150,
                        height: 80,
                        //position: 'top' - position should be either absolute or relative
                    }}
                        source={{
                        uri: 'https://vignette.wikia.nocookie.net/avengers-assemble/images/d/d6/Usa_avengers_skchi_blackwidow_n_6e8100ad.png/revision/latest/scale-to-width-down/449?cb=20170426073401'
                    }}/>

                </TouchableOpacity>
                <TouchableOpacity >
                    <Image
                        style={{
                        width: 200,
                        height: 250
                    }}
                        source={{
                        uri: 'https://clipart.info/images/ccovers/1516942387Hulk-Png-Cartoon.png'
                    }}/>

                </TouchableOpacity>

            </ImageBackground>
        </View>
    );
}
}
 ///need help with coloring each icon
const styles = StyleSheet.create({
spiderman: {
    flex: 1,
    position: 'relative',
    alignItems: 'flex-end',
    justifyContent: 'center',
    width: 50,
    height: 500,
    bottom: -140,
    left: Dimensions
        .get('window')
        .width - 10,
    zIndex: 10
},
blkwidow: {
    flex: 1,
    position: 'relative',
    alignItems: 'flex-end',
    justifyContent: 'flex-end',
    width: 50,
    height: 50,
    bottom: 50,
    left: Dimensions
        .get('window')
        .width - 70,
    zIndex: 10
}
});

Answer 2

您正在使用不正确的按钮，您必须编写 Button 并且只需一次