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来获取缓存样式。也许您的按钮容器视图背景是白色的，并且您没有看到圆角。

继承我的工作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
    },
});

Answer 2

您必须将样式 overflow: hidden 添加到 TouchableOpacity

React-native TouchableOpacity按钮不考虑border / border-radius

2 个答案: