react-native - React-Native：TouchableOpacity 渲染问题

Question

我在渲染 TouchableOpacity 时遇到了一些问题

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


class Button extends Component {
  render() {

    return(
      <TouchableOpacity onPress= {this.props.onPress}
        style = {style.buttonStyle}>
        <Text style = {style.textStyle}>{this.props.name}</Text>
      </TouchableOpacity>
    );
  }
}

const style = {
  textStyle:{
    fontSize: 16,
    alignSelf: 'center',
    color: '#007aff',
    fontWeight: '600',
    paddingTop: 10,
    paddingBottom: 10
  },
  buttonStyle: {
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#000',
    borderColor: '#007aff',
    borderWidth: 1,
    borderRadius: 5,
    marginLeft: 5,
    marginRight: 5

  }
}

export {Button};

这是我的按钮组件的代码，当我渲染它时，我的按钮看起来像这样

我在登录组件中使用了相同的组件，它工作得很好...... 预期的按钮：