内部视图的角半径，React Native答案

【问题标题】：Corner radius for inner views, React Native内部视图的角半径，React Native
【发布时间】：2017-09-19 17:00:07
【问题描述】：

我为容器视图应用了cornerRadius的样式，它有下一个设置：

container: {
    height: 100,
    flexDirection: 'row',
    backgroundColor: '#51C979',
    marginLeft: 8,
    marginRight: 8,
    marginBottom: 4,
    marginTop: 4,
    borderRadius: 10
},

我把这个容器分成两个带有样式的子视图：

leftContainer: {
    flex: 1
},
rightContainer: {
    flex: 1
},

层次结构如下所示：

        <View style={styles.container}>
            <View style={styles.leftContainer}>
                <Text style={[styles.nameText, styles.textColor]}> {this.props.activity.name} </Text>
            </View>
            <View style={styles.rightContainer}>
                <Text style={[styles.durationText, styles.textColor]}> {this.props.activity.duration + ' hrs'} </Text>
                <Text style={[styles.rangeText, styles.textColor]}> {this.props.activity.timeRangeStringRepresentation} </Text>
            </View>
        </View>

在此之后，只有底角有半径。为什么？

【问题讨论】：

标签： react-native

【解决方案1】：

因为 Text 组件在 iOS 上有背景色

<View style={styles.container}>
        <View style={styles.leftContainer}>
            <Text style={[styles.nameText, styles.textColor]}> {this.props.activity.name} </Text>
        </View>
        <View style={styles.rightContainer}>
            <Text style={[styles.durationText, styles.textColor]}> {this.props.activity.duration + ' hrs'} </Text>
            <Text style={[styles.rangeText, styles.textColor]}> {this.props.activity.timeRangeStringRepresentation} </Text>
        </View>
    </View>

修复向 Text 组件添加透明背景颜色的问题

textColor:{
  backgroundColor: 'transparent',
}

【讨论】：