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

Question

我在父View组件中有孩子View。我设置了Parent的边框，但是子View的边框覆盖了parent的边框。

这是屏幕

这是我的代码

<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，但它没有用。任何人都知道如何解决这个问题？

Answer 1

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

尝试像（身高/ 20 - 4）