Question

我的主<views>中有2个<view>，我将第二个视图设置为90%宽度，宽度是屏幕尺寸的90%，但它不在屏幕中心页面上，我将justifycontents设置为居中，当我删除width属性时，视图居中，请问我在做什么错了

return (
            <View style={BackStyles.main}>
                <View style={BackStyles.container}>
                    <TextInput placeholder="Search for your herbs..."
                               underlineColorAndroid={'transparent'} style={BackStyles.textBox}/>
                </View>
                <View style={BackStyles.herb_box}>
                    <Text>values</Text></View>
            </View>
        );
    }
}
}

const BackStyles = StyleSheet.create({
herb_box: {
    backgroundColor: '#fff',
    borderRadius: 7,
    marginTop: 20,
    // alignItems: 'center',
    justifyContent: 'center',
    margin: 'auto',
    width: '90%',
},
main: {
    flexDirection: 'column',
    flex: 1,
    backgroundColor: '#E2E2E2',
    // justifyContent: 'center',
},
container: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    alignSelf: 'stretch',
    //   flex: 1,
    //  backgroundColor: '#E2E2E2',
    marginTop: 20,
    //  width: '100%'
},
textBox: {
    flex: 1,
    height: 45,
    padding: 4,
    //  textAlignVertical: 'top',
    paddingLeft: 20,
    // marginRight: 5,
    flexGrow: 1,
    //  fontSize: 18,
    color: '#000',
    backgroundColor: '#fff',
    // textAlign: 'center'
 },

Answer 1

您需要将 marginHorizontal 设置为 5％，将HerbBox更新为此：

herb_box: {
    backgroundColor: '#fff',
    borderRadius: 7,
    marginTop: 20,
    marginHorizontal:"5%",
    margin: 'auto',
    width: '90%',
},

宽度覆盖证明内容

1 个答案: