我创建了一个通用的按钮，我希望它有圆边而不是正方形。我的按钮组件如下：

const Button = ({ onPress, children }) => {
  const { buttonStyle, textStyle } = styles;

  return (
    <TouchableOpacity onPress={onPress} style={buttonStyle}>
      <Text style={textStyle}>
          {children}
      </Text>
    </TouchableOpacity>
  );
};

const styles = {
    textStyle: {
        alignSelf: 'center',
        color: colors.primaryTeal,
        fontSize: 16,
        fontWeight: '600',
        paddingTop: 10,
        paddingBottom: 10,
    },
    buttonStyle: {
        flex: 1,
        backgroundColor: colors.whiteText,
        marginLeft: 5,
        marginRight: 5,
        borderRadius: 50
    }
};

然而，它仍然是正方形的，并且根本不响应borderRadius。
它是这样调用的：

<Button onPress={this.onButtonPress.bind(this)}>
    Log in
</Button>

我如何使它尊重borderRadius并得到圆边？
显示它的登录表单（Render）

render() {
    return (
        <Card>
            <CardSection>
                <Input
                    placeholder="user@gmail.com"
                    label="Email"
                    value={this.state.email}
                    onChangeText={email => this.setState({ email })}
                />
            </CardSection>
            <CardSection>
                <Input
                    secureTextEntry
                    placeholder="password"
                    label="Password"
                    value={this.state.password}
                    onChangeText={password => this.setState({ password })}
                />
            </CardSection>
            <View style={styles.btnWrapper}>
            <CardSection>
                {this.state.loading ? 
                    <Spinner size="small" /> : 
                    <Button onPress={this.onButtonPress.bind(this)}>
                        Log in
                    </Button>}
            </CardSection>
            </View>
            <Text style={styles.errorTextStyle} disabled={this.state.error !== null}>
                {this.state.error}
            </Text>
        </Card>

CardSection组件：

const CardSection = (props) => {
  return (
    <View style={styles.containerStyle}>
      {props.children}
    </View>
  );
};

const styles = {
  containerStyle: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    borderColor: '#ddd',
    position: 'relative'
  }
};