Как исправить cornerRadius в элементе текста в реагировать родной

Question

Я новичок, чтобы реагировать на нативный и пытаюсь скруглить углы к текстовым элементам, так как вы можете видеть, что углы все еще торчат из скругленной границы, и то же самое происходит, когда я оборачиваю текст в элементе представления, я не знаю как это исправить. Вот код:

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 для лучшего опыта. Вам не нужно определять границу n все с помощью 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'
  }
});