javascript - react child 应用程序定位按钮

Question

** 需要将黑寡妇定位到左中并将绿巨人定位到左下角但无法弄清楚任何人有任何提示加上我只想将按钮隔离到图片不确定我是否需要分开按钮和单独定位..

这是来自 React native 元素的代码..**

    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 来让它做一些事情。