Question

之前，我有宽度全尺寸的问题（100％）在本机中，宽度：100％不受支持.. 所以我使用var width = Dimensions.get('window').width; //full width这段代码。

但在这种情况下，我想把按钮放在我想放置的东西上在这张照片

我想放手！身体的手上的按钮。像宽度，反应原生不支持％.. 所以无论电话更改大小，我都想放置按钮

这是我的所有代码

const MK = require('react-native-material-kit');
import React, { Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
  ScrollView
} from 'react-native';
const {
  MKButton,
  MKColor,
} = MK;
const ColoredButton = MKButton.button()
  .withBackgroundColor(MKColor.Amber)
  .build();
const Fab = MKButton.coloredFab()
  .withBackgroundColor(MKColor.Teal)
  .build();
class Test extends Component {
  render() {
    return (
        <ScrollView style={styles.scrollView}>
          <Image
          style={styles.Bodystyle}
          resizeMode='contain'
          source={require('./img/body.png')}>  
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            <Text style={styles.instructions}>
              To get started, edit index.android.js
            </Text>
            <Text style={styles.instructions}>
              Shake or press menu button for dev menu
            </Text>
            <View style={styles.row}>
            <ColoredButton   
                onPress={() => {
                console.warn('hi, raised button!');
                }}
            >
            <Text pointerEvents="none"
              style={styles.Buttontext}>
              Hand!!
            </Text>
            </ColoredButton>
            <Fab>
              <Text style={styles.Buttontext}>
                Hand!!
              </Text>
            </Fab>
            </View>
          </Image>
        </ScrollView>
    );
  }
}
var width = Dimensions.get('window').width; //full width
var height = Dimensions.get('window').height; //full height
const styles = StyleSheet.create({
  scrollView:{
    flex:1,
  },
  row :{
    flexDirection:'row',
  },
  container: {
    flexDirection: 'column',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    flex:1
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  Buttonstyle:{
     justifyContent: 'center',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  Bodystyle:{
    flexDirection:'column',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    width: width,
    height: height,
  },
  Buttontext:{
    textAlign: 'center',
    color: '#000000',
    fontSize: 10,
  }
});

AppRegistry.registerComponent('Test', () => Test);

Answer 1

我可以像

一样简单

const getPosition = (left, top, width, height) => ({ 
  left: width * left, 
  top: height * top 
})

例如

button: {
  ...(getPosition(0.7, 0.8, imageWidth, imageHeight))
}

如何将按钮放在我想要放置的内容中？

1 个答案: