私は反応ネイティブで配置したいものにボタンを配置する方法は？

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)) 
}