边框半径不圆角反应原生

Question

我刚刚开始学习 react native 并且正在尝试编写一些练习程序，但是由于某种原因，我无法绕过文本元素的角落。我一直在使用，borderRadius但这不起作用。这是整个代码：

import React from 'react';
import { StyleSheet, Text, View, Button, Alert } from 'react-native';

export default function App() {

function myButtonPressed(){
  Alert.alert("Logout")
}
  return (
    <View style={styles.container}>
      <Text style={styles.text}> Login </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
    backgroundColor: "#BB2cd9",
    paddingVertical: 12,
    paddingHorizontal: 40,
    color: '#ffffff',
    borderRadius: 10

  }
});

我是否缺少需要导入的东西？

Answer 1

您可以在任何反应 UIComponent 中使用borderRadius: numberwith overflow: 'hidden'。即<Text>,<View>,<Button>等风格，如：

render() {
return <View style = {{ height:100, width:100, backgroundColor: 'green', borderRadius: 10, overflow: 'hidden'}} ></View>
}  

节点：关心 overflow: 'hidden'

Answer 2

尝试将边框半径应用于元素的View环绕Text：

请参阅https://reactnativecode.com/add-rounded-corners-border-text/