如何在 React Native 中修复文本元素中的 cornerRadius

Question

我是 React Native 的新手，正在努力将文本元素的边角圆化，正如您所看到的，边角仍然伸出圆角边框之外，当我将文本包裹在视图元素中时也会发生同样的情况，我不知道如何解决这个问题。这是代码：

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

export default class App extends React.Component {

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
    backgroundColor: "#BB2CD9",
    paddingVertical: 10,
    paddingHorizontal: 40,
    color: "#FFFFFF",
    borderRadius: 10,
    borderWidth: 2,
    borderColor: "#FFFFFF"
  }
});

Answer 1

您可以做的是将文本包装在视图组件中，并将所有必要的样式传递给视图。

export default class App extends React.Component {

 myButtonPressed(){
  Alert.alert("Logout");
}
render() {
  return (
    <View style={styles.container}>
        <TouchableHighlight 
          onPress={this.myButtonPressed}
        >
          <View style={styles.btnContainer}>
            <Text style={styles.text}> Login </Text>      
          </View>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  btnContainer: {
    backgroundColor: "#BB2CD9",
    paddingVertical: 10,
    paddingHorizontal: 40,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: "#FFFFFF"
  },
  text: {
    fontSize: 30,
    color: "#FFFFFF",
  }
});

Answer 2

您可以使用TouchableOpacity以获得更好的体验。你不需要定义 border n all with TouchableOpacity.

试试这个 - Live Demo

export default class App extends React.Component {

 myButtonPressed(){
  Alert.alert("Logout");
}
render() {
  return (
    <View style={styles.container}>
        <TouchableOpacity 
          onPress={this.myButtonPressed}
          style={styles.hLight}
        >
        <Text style={styles.text}> Login </Text>      
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  hLight: {
    fontSize: 30,
    backgroundColor: "#BB2CD9",
    paddingVertical: 10,
    paddingHorizontal: 40,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: "#FFFFFF"
  },
  text: {
    fontSize:20,
    color:'white'
  }
});

使用 TouchableHighlight - Live

export default class App extends React.Component {

 myButtonPressed(){
  Alert.alert("Logout");
}
render() {
  return (
    <View style={styles.container}>
        <TouchableHighlight 
          onPress={this.myButtonPressed}
          style={styles.hLight}
        >
        <Text style={styles.text}> Login </Text>      
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  hLight: {
    fontSize: 30,
    backgroundColor: "#BB2CD9",
    paddingVertical: 10,
    paddingHorizontal: 40,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: "#FFFFFF"
  },
  text: {
    fontSize:20,
    color:'white'
  }
});

如何在 React Native 中修复文本元素中的 cornerRadius

How to fix cornerRadius in text element in react native

reactjs

react-native

react-redux

react-native-android