React-native TouchableOpacity 按钮不尊重边界/边界半径

Question

我创建了一个通用按钮，我希望它具有圆形边缘而不是方形。我的按钮组件是这样的:

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() {
    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'
  }
};

Answer 1

工作得很好。只要确保使用 react native 的 StyleSheet.create获取缓存的样式。
也许您的按钮容器 View 背景是白色的，而您没有看到圆角。

这是我的工作 snack

我使用的代码片段，但请引用小吃，因为您会看到它在运行中。

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

const Button = ({ onPress, children }) => {

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


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Button>
          Log in
        </Button>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: 'black',
  },
  textStyle: {
        alignSelf: 'center',
        color: 'teal',
        fontSize: 16,
        fontWeight: '600',
        paddingTop: 10,
        paddingBottom: 10,
    },
    buttonStyle: {
        flex: 1,
        backgroundColor: 'white',
        marginLeft: 5,
        marginRight: 5,
        borderRadius: 50
    },
});