反应本机marginTop在TouchableOpacity中偏移文本位置

Question

因此，我刚刚开始在React Native中进行开发并遇到了这个问题，由于某些原因，当我尝试将marginTop设置为可触摸不透明度时，我的文字不会与可触摸不透明度一起“移动”。这是我的意思：

它变成：

相关代码如下（针对第二张图片）。对于第一个图像，除了没有marginTop之外，代码完全相同。在这里：

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <TouchableOpacity style={styles.loginButton}>
        <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  loginButton: {
    backgroundColor: 'lightblue',
    height: '20%',
    justifyContent: 'center',
    borderRadius: 20,
    marginTop: 30%
  },
  buttonText: {
    textAlign: 'center',
    fontSize: 20,
  },
});

Answer 1

使用实际像素数代替百分比数

import {Dimensions} from 'react-native'
const {height} = Dimensions.get('window')
marginTop: 0.3 * height

尝试，您会正确使用