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

完全に罰金作品

。反応ネイティブの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 
    }, 
});