子视图边框在 react-native 上覆盖父视图边框答案

【问题标题】：Child view border overrides parent's one on react-native子视图边框在 react-native 上覆盖父视图边框
【发布时间】：2017-12-24 07:03:43
【问题描述】：

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

这是屏幕

这是我的代码

<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，但没有成功。有谁知道我该如何解决这个问题？

【问题讨论】：

标签： javascript css react-native styles

【解决方案1】：

不是边界。您正在放置所有内容的高度（高度/20），但您没有考虑刚刚添加的边框，该边框计入高度。

尝试类似 (height/20 - 4)

【讨论】：