Question

这是正常屏幕：

这是异常屏幕：

属性 borderRadius 影响 backgroundColor ，我真的不知道是什么问题。

请帮助我解决此问题。

这是我的组件 Panel.js

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#ffffff',
        margin:$F.scale(10),
        // borderRadius:$F.scale(3),
        paddingLeft:$F.scale(8),
        paddingRight:$F.scale(8),
    },
    contTitle:{
        flexDirection:'row',
        paddingTop:$F.scale(10),
        paddingBottom:$F.scale(10),
        marginBottom:$F.scale(10),
        alignItems:'center',
        borderBottomWidth:$F.compatiblePixel*1,
        borderBottomColor:'#DFDFDF',
    },
    cont:{
        flex:1,
        paddingBottom:$F.scale(10),

    },
    rightHeader:{
        flex:1,
        flexDirection:"row",
        justifyContent:'flex-end',
        // backgroundColor:"#444444",
    }
});

   <View style={styles.container}>
    <View style={styles.contTitle}>
        <Text style={{fontSize:$F.scale(13),color:"#000000",flex:1}}>{this.state.titleCont}</Text>
        <SelectOption 
            options={this.state.selOptions} 
            onSelectOptions={this._ChooseList.bind(this)} 
            selectShow={this.props.rightHeader?false:this.props.selectShow}  
        />
        <View style={[{display:this.props.rightHeader?"flex":"none"},styles.rightHeader]}>
            {
                this.props.rightHeader
            }
        </View>
    </View>
    <View style={styles.cont} >
        {this.props.children}
    </View>
  </View>

我在 learnning.js

中使用

<ScrollView  style={[this.props.style,styles.container]}>
        <Panel titleCont="学习轨迹" selectShow={false}> 
        <View style={styles.progressItems}>
            <View style={styles.Line}></View>
            <View style={styles.progressBox}>
            {this.state.learningData.map((v,i)=>{
              return (
                  <ProcessBox key={v.id}>
                  <TouchableHighlight underlayColor="rgba(0,0,0,0)" activeOpacity={1} onPress={()=>{this._getClassifyId(v.secondClassifyId,v.id)}}>
                    <View style={styles.learnLesson}>
                        <View  style={styles.lessonImg} >
                            <Image source={{uri:IMGHEADURL+v.cover}}  style={styles.Image}/>
                        </View>
                        <View style={styles.lessonMsg}>
                              <Text style={{fontSize:$F.scale(7.7),color:"#4A4A4A"}}>{v.name}</Text>
                              <Text style={{fontSize:$F.scale(6),color:"#BBBBBB",marginBottom:$F.scale(5.5)}}>{formatTime(v.hasStudy?v.study_time:v.create_time,"full")}</Text>
                              <View style={styles.lessonStatus}>
                                    <View style={[styles.statusItems,styles.status1]}>
                                          <Text style={{fontSize:$F.scale(6.1),color:"#E5E0D0"}}>{v.hasStudy?"练习中":"未练习"}</Text>
                                    </View>
                                    <View style={[styles.statusItems,styles.status2]}>
                                          <Text style={{fontSize:$F.scale(6.1)}}>{v.firstClassifyName}</Text>
                                    </View>
                                    <View style={[styles.statusItems,styles.status2]}>
                                          <Text style={{fontSize:$F.scale(6.1)}}>{v.secondClassifyName}</Text>
                                    </View>
                                    <View style={styles.shareBtn}>
                                    <ICON name="uniE917" size={$F.scale(8.8)} color="#C8C8C8" />
                                    </View>
                              </View>
                        </View>
                    </View>
                    </TouchableHighlight>
                </ProcessBox>
              )
            })}

            </View>
        </View>

        </Panel>
      </ScrollView>

循环数在十个以内，样式良好，backgroundColor是十个以上的透明对象。

Answer 1

我认为看一些相关的代码，找到相关的解决方案可能很有用。

Answer 2

我知道这是一个安静的老话题。您找到解决方案了吗？您是否报告了该问题？不幸的是，今天这个问题仍然存在。

https://github.com/facebook/react-native/issues/15826

react-native的borderRadius使backgroundColor透明

2 个答案: