react-native - 样式中带有边距的 Native Base 按钮​​并不包含其中的文本

Question

我使用 native 基础编写了一个基于 React Native 的应用程序。当我尝试在按钮中添加边距时，它不会显示按钮内的文本。我该如何修复它？ 当我删除边距时，它工作正常。但当我把边距放回去时，它不起作用。我搜索了很多来源，但没有人给出任何解决方案。 这是代码:

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Image } from 'react-native';
import FloatLabelInput from './src/components/FloatLabelInput';
import {Button, Text} from 'native-base'

type Props = {};
export default class App extends Component<Props> {
 render() {
  return (
   <View style={styles.container}>
    <Image
     style={styles.background_Image}
     source={require('./media/free-blurry-background-1636594.jpg')}
    />
    <Image source={require('./media/Save-the-Children-Logo.png')} 
    style={{height: '10%', width: '100%'}}/>
    <FloatLabelInput name='Username' security='false'/>
    <FloatLabelInput name='Password' security='true'/>
    <Button block rounded danger
        onPress={() => console.log('my first app')}
        style = {styles.button_style}
        // accessibilityLabel="Learn more about this purple button"
    > 
      <Text >LOGIN</Text>
    </Button>
  </View>
);
 }
}

const styles = StyleSheet.create({
 container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#C0C0C0',
 },
 welcome: {
  fontSize: 20,
  textAlign: 'center',
  margin: 10,
 },
instructions: {
 textAlign: 'center',
 color: '#333333',
 marginBottom: 5,
},
background_Image: {
 backgroundColor: '#ccc',
 flex: 1,
 position: 'absolute',
 width: '100%',
 height: '100%',
 justifyContent: 'center',
},
 button_style: {
 margin: '5%'
 }
 });

Answer 1

引用这个问题https://github.com/facebook/react-native/issues/19164我相信这是一个与百分比相关的bug .. 对于替代解决方案，请尝试使用 px

button_style: {
    margin: 5
}