子视图边框覆盖父本的反应本机

时间:2017-12-24 07:03:43

标签: javascript css react-native styles

我在父View组件中有子View。我设置了父级边框但子视图的边框覆盖了父级边框。

这是屏幕

enter image description here

这是我的代码

<View style={{flexDirection: 'row',marginLeft: 20, marginRight: 20, height: height/20,
                    width: width-40, borderWidth: 2, borderRadius: 4, borderColor: '#D3D3D3'}}>
                    <View style={{backgroundColor: '#D3D3D3',flexDirection: 'row',
                        height: height/20, alignItems: 'center'}}>
                      <Thumbnail style={{marginLeft: 5,width: 20, height: 20}} square source={require('../assets/Turkey.png')}/>
                      <Picker mode="dropdown" selectedValue={this.state.selectedCountry}
                              onValueChange={(value)=>this.onCodeChanged(value)}
                              >
                          <Picker.Item label="+44" value="England"></Picker.Item>
                          <Picker.Item label="+90" value="Turkey"></Picker.Item>
                      </Picker>
                    </View>
                    <View style={{height: height/20, width: 250}}>
                        <Input placeholder="Phone" placeholderTextColor='#D3D3D3'/>
                    </View>
                </View>

我尝试将子视图的borderBottomWidth道具设置为0,但它不起作用。任何人都知道如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

不是边界。你正在设置所有东西的高度(高度/ 20),但是你没有考虑刚刚添加的边界,这个边界是高度。

尝试类似(身高/ 20 - 4)