反应孩子应用程序定位按钮

Question

**需要将黑寡妇定位在左侧居中，将绿巨人定位在左下方，但无法弄清楚任何人有任何提示，而且我只想将按钮与图片隔离，不确定是否需要将按钮和单独定位..

这是来自 React 原生项目的代码..**

    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;
const getPosition = (left, top, width, height) => ({ 
  left: width * left, 
  top: height * top 
})



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,position:'top'}} />
    </TouchableOpacity>

  </ImageBackground>
  </View>
  );
 }
}
///need help with coloring each icon
const styles = StyleSheet.create({
  container: {
flex: 1,
backgroundColor: 'blue',
position:'right',
alignItems: 'flex-end',
justifyContent: 'space-between',
width: 50,
height: 50,
bottom: 50,
left: Dimensions.get('window').width -70,
zIndex: 10,
  },
  spiderman: {
borderRadius: 2,
padding: -100,
marginBottom: 2,
shadowColor: 'white',
shadowOffset: { width: 10, height: 0 },
shadowRadius: 0,
shadowOpacity: 0.45,
  },
});

Answer 1

您尚未将容器样式设置为任何组件样式属性的值。看看蜘蛛侠，你的可触摸容器只有 50x50，所以它不会包裹你的整个图像（200x300）。摆脱蜘蛛侠风格的所有属性，除了边界半径，你应该很好。将 onPress 属性 onPress={this.helloWorld} 添加到您的 touchable 以使其执行某些操作。