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

您尚未将容器样式设置为任何组件的style属性的值。看着蜘蛛侠，您的可触摸容器只有50x50，因此不会包装您的整个图像（200x300）。摆脱蜘蛛侠风格上除边框半径以外的所有属性，您应该会不错。在您的触摸屏上添加一个onPress道具onPress={this.helloWorld}，使其可以执行某些操作。

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

1 个答案: