React Native marginTop 在 TouchableOpacity 中偏移文本位置答案

【问题标题】：React Native marginTop offsetting text position in TouchableOpacityReact Native marginTop 在 TouchableOpacity 中偏移文本位置
【发布时间】：2018-08-23 02:16:35
【问题描述】：

所以我刚刚开始在 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,
  },
});

【问题讨论】：

标签： android reactjs react-native mobile touchableopacity

【解决方案1】：

使用实际像素数而不是百分比数

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

尝试一下，你会成功的

【讨论】：

谢谢！我试过了，它有效，但它不准确，这就是为什么我不接受它作为答案。出于某种原因，0.3 * 高度实际上并没有使组件下降 30% 的屏幕，而是更多。百分比不起作用的任何原因？它不应该做同样的事情吗？