Question

我将带有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>

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

Answer 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>

修复为文本组件添加透明背景颜色

textColor:{
  backgroundColor: 'transparent',
}

内部视图的角半径，React Native

1 个答案: